Методы сглаживания шрифтов? рендеринг текстовой тени по-разному в Chrome 14.0.833.0 или новее

EDIT:

Теперь мы находимся в Chrome 19, и это все еще не исправлено. Просто уточнение: это происходит в Chrome на Windows, а не на Linux или Mac. Я думаю, что это связано с Cleartype. Google, пожалуйста, исправьте это.

Я использовал CSS3 text-shadow для эмуляции сглаживания шрифтов IE9 в других браузерах. В основном, я просто установил текстовую тень текста контейнера в фон контейнера. Вы можете увидеть поведение, установив text-shadow на довольно большой элемент шрифта в чем-то ниже, чем в Chrome 14.0.833. Текст выглядит гладко. Удалите текстовую тень, и шрифт выглядит неровным. Однако в Chrome 14.0.833 (UPDATE: он также "сломан" в 14.0.834) это больше не работает. Свойство text-shadow все еще работает, но не так, как раньше. Вы можете увидеть поведение здесь (просто загрузите его с версиями Chrome) Кажется, что в старых хромах текстовая тень начиналась внутри текста немного, а затем распространялась - что, возможно, было причиной взлома текстовой тени. В новом Chrome появляется текстовая тень, начинающаяся как раз за пределами текста, поэтому она не будет работать. Посмотрите, что я имею в виду здесь.

Мой вопрос в основном: Это ошибка? Какое ожидаемое поведение, если либо? Существуют ли какие-либо другие способы сглаживания шрифтов, которые я могу использовать?

W3C spec, похоже, не сказал, что такое предполагаемое поведение, хотя я видел, что, возможно, я должен использовать текстовый контур (который не поддерживается, что побеждает цель)

Ответ 1

Хорошо, я понял это, сортировка. Раздражает с тех пор, как я поставил щедрость, но что бы то ни было. Я уверен, что это не ошибка, и это ожидаемое поведение - тем более, что мы видели еще несколько итераций Chrome, и он остался прежним. Работает несколько разных методов. Я написал немного для своего блога, вы можете увидеть полную статью здесь, но здесь основная ее часть:

Сначала я попробовал -webkit-text-stroke:1px #000, где #000 - это цвет текста. Но этот стиль предназначен для использования, где цвет текст отличается от штриха, для красивого текста. когда оба цвета одного цвета, это выглядит... странно. Я не знаю, почему; я - нет эксперт по визуализации шрифтов. Вы можете видеть поведение на картинке после статьи.

Далее я попробовал простой text-shadow:#000 0 0 1px, где #000 - то же самое цвет как текст. Из-за той же проблемы с Chrome 14.0.833+ это все еще оставляет шрифт, выглядящий несколько зубчатым. Это лучше, чем просто обычный текст.

Затем я попытался объединить две попытки выше. Это выглядит немного бит лучше, но он расширяет текст, поскольку он по существу добавляет 2 пикселя к мыслительности текста.

Наконец, я попытался применить два текстовых тени: text-shadow:#000 0 1px 1px,#000 0 -1px 1px → где #000 - цвет текста. Что это делает примените два текстовых теней, один из которых немного сдвинут и прочее вдавлено. Таким образом, тень текста покрывает зубчатые края. Это немного расширяет текст, но определенно сглаживает его.

В зависимости от размера вашего текста работают разные методы. Меньшие (но все же зубчатый) текст мог бы использовать текстовую тень, больший текст мог бы используйте метод shadow/stroke, и очень большой текст может использовать метод двойной тени. Конечно, чем больше текст, тем менее заметный добавляются несколько пикселей. Вы можете увидеть все различные методы здесь

Ответ 2

Хорошо, я потратил довольно много времени на это, и это то, к чему это сводится: Это ошибка.

Прежде всего, -webkit-font-smoothing:antialiased; работает только для Mac, а не для Windows.

Я нахожусь в Windows7, я создал многоуровневое изображение Pixlr с снимками экрана из JSfiddle, которые я сделал с четырьмя различными элементами с различной теневой тенью, применяемой к каждому. Вы можете четко видеть, что текстовая тень изменилась с Chrome13 и Chrome 14.0.835. Мне пришлось переключаться между каналом Beta и Dev пару раз, потому что я испортил, деинсталляция и т.д. Ugh.

Загрузите слоистый файл изображения Pixlr, который я сделал из:

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

Затем перейдите в http://pixlr.com/editor/ и выберите, чтобы открыть файл с компьютера, откройте файл. Теперь в Pixlr увеличьте масштаб до четырех строк текста, в панели слоев на верхнем слое установите флажок и снимите флажок, затем снова проверьте его, повторите его и посмотрите, насколько радикальным является изменение текстовой тени.

Это должно быть представлено как ошибка. Ссылка на эту страницу может быть использована для отображения эффекта, если это необходимо.

JSfiddle (JSfiddle, который я использовал на скриншотах) http://jsfiddle.net/nicktheandroid/Xkp9q/

Я положил кусок пирога в микроволновку полтора часа назад... это холодно: (

Ответ 3

-webkit-font-smoothing:antialiased;

может работать для вас

Ответ 4

ДА! Я нашел решение этой проблемы. Это странно, но это работает для меня.

Итак, чтобы он работал, поместите этот стиль в элемент, который хотите сгладить:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

Я разместил образец HTML файла только с этим стилем, чтобы вы могли быстро протестировать его.

Ответ 5

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

ИЛИ

text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;

Протестировано и отлично работает в разных версиях Opera, Chrome, Safari и Firefox.

Ответ 6

Это было так, как многие веб-сайты (Google Webfonts, а также высокопрофессиональные шрифты от Typekit и т.д.) смотрели в Firefox (слева) и Google Chrome (справа) на системах Windows (и в конечном итоге в другом месте). Без шуток! Чтобы прояснить это: единственным браузером, который полностью испортил Google Webfonts, был браузер Google Chrome Chrome. Как это заболело? В 2013 году браузер Opera переключил свой механизм рендеринга на webkit (= механизм разгона в Chrome), поэтому эта проблема существует и в Opera.

подробнее: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/