Методы сглаживания шрифтов? рендеринг тени текста в Chrome 14.0.833.0 или выше
РЕДАКТИРОВАТЬ:
Сейчас мы находимся в 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 тень текста начиналась внутри текста лишь немного, а затем растягивалась - возможно, поэтому хак text-shadow работал, В более новом Chrome кажется, что тень от текста начинается сразу за текстом, поэтому она не будет работать. Посмотрите, что я имею в виду здесь.
Мой вопрос в основном: это ошибка? Какое поведение ожидается, если либо? Есть ли какие-либо другие обходные пути, которые я могу использовать?
Спецификация W3C, похоже, не говорит о предполагаемом поведении, хотя я и видел, что, возможно, мне следует использовать текстовую схему (что вроде не поддерживается, что противоречит цели)
6 ответов
Ну, я понял это, Сорта. Раздражает, так как я назначил награду, но что угодно. Я вполне уверен, что это не ошибка, и это ожидаемое поведение - тем более, что мы видели еще несколько итераций 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цвет текста. Для этого применяются две текстовые тени, одна из которых слегка отталкивается, а другая - вверх. Таким образом, тень текста покрывает неровные края. Это немного набирает текст, но определенно сглаживает его.В зависимости от размера вашего текста, различные методы работают. Меньший (но все еще зубчатый) текст может использовать текстовую тень, больший текст может использовать метод тени / обводки, а очень большой текст может использовать метод двойной тени. Конечно, чем больше текст, тем меньше заметных лишних пикселей. Вы можете увидеть все различные методы здесь
Хорошо, я потратил немало времени на это, и вот к чему это сводится: это ошибка.
Прежде всего, -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/
Я положил кусок пирога в микроволновку полтора часа назад.... холодно:(
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.
ДА! Я нашел решение этой проблемы. Это странно, но это работает для меня.
Итак, чтобы это сработало, поместите этот стиль на элемент, который вы хотите сгладить:
-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;
Я поместил образец HTML-файла только с этим стилем, чтобы вы могли быстро проверить его.
Именно так многие веб-шрифты (Google Webfonts, а также высокопрофессиональные шрифты из Typekit и т. Д.) Выглядели в Firefox (слева) и Google Chrome (справа) в системах Windows (и, в конечном счете, в других местах). Я не шучу! Чтобы уточнить это: единственным браузером, который полностью испортил Google Webfonts, был браузер Google Chrome. Насколько это больное? В 2013 году браузер Opera переключил свой движок рендеринга на webkit (= движок рендеринга в Chrome), поэтому эта проблема существует и в Opera.
больше: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/