Методы сглаживания шрифтов? рендеринг тени текста в Chrome 14.0.833.0 или выше

Question

РЕДАКТИРОВАТЬ:

Мы сейчас в 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). Кажется, что в старых Chromes тень текста начиналась внутри текста лишь немного, а затем растягивалась - возможно, поэтомувзлом текстовой тени сработал.В более новом Chrome, кажется, тень текста начинается просто за пределами текста, поэтому она не будет работать.Посмотрите, что я имею в виду здесь .

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

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

Answer 1

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

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

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

Загрузите многослойный файл изображения 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/

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

Answer 2

Ну, я понял это, Сорта.Раздражает, так как я назначил награду, но что угодно.Я вполне уверен, что это не ошибка, и это ожидаемое поведение - тем более, что мы видели еще несколько итераций 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 это цвет текста.Для этого применяются две тени текста, одна из которых слегка отталкивается, а другая - вверх.Таким образом, тень текста покрывает неровные края.Это немного увеличивает объем текста, но определенно сглаживает его.

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

Answer 3

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

OR

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

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

Answer 4

-webkit-font-smoothing:antialiased; 

может работать на вас

Answer 5

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

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

Answer 6

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

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

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

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