11 октября 2012 в 17:05

Сглаживание веб-шрифта при помощи CSS3 перевод

7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.

[демонстрационная иллюстрация]

Посмотреть этот фокус.


Примечания переводчика:

  • Речь в этой блогозаписи Mathieu Avons ведёт про известный эффект, связанный с недостаточной сглаженностью шрифтов в Windows XP: «почти вертикальные» линии в них выглядят достаточно гладко (особенно когда в дело вступает ClearType), а вот «почти горизонтальные» состоят из заметных ступенек, вызываемых резкими (несглаженными) однопиксельными рывками линии контура, совершаемыми в вертикальном направлении. Оказывается, эту проблему можно преодолеть!
     
  • Я был очень глубоко удивлён, заметив необычайно действенную силу наблюдаемого эффекта от тени. Изменяется далеко не только гладкость контура букв. Также на ≈1 пиксель изменяется и расстояние между некоторыми буквами, и положение некоторых букв в слове, и даже ширина некоторых букв. Контуры некоторых более мелких букв (в надписи «EA AT E3 2011») начинают выглядеть существенно тоньше.
     
  • По двухкадровой анимации, которую Mathieu Avons прикладывает к своей блогозаписи для наблюдения разницы между шрифтом с тенью и без тени, также можно видеть эти эффекты. Буквы не только превосходно сглаживаются, но и прыгают туда-сюда, меняя ширину и толщину (а курсивные, кажется, ещё и наклон). Они шевелятся! Воистину преудивительно, что всё это достигается несколькими простейшими строчками на языке CSS3:
     
    h1.title {
       text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /* наверх и влево */
       1px 1px 1px rgba(255,255,255,0.2), /* вниз и вправо */
       1px 1px 1px rgba(0,0,0,0.7); /* тёмная тень */
    } 
     
  • Следует заметить, впрочем, что по ссылке «посмотреть этот фокус» происходит переход на пáру скриншотов, подменяющих один другого при наведении мыши, а не на реальный кусок кода сайта EA Games с настоящими текстовыми заголовками. Чтобы живьём наблюдать эффект, придётся, наверное, вооружиться Stylish да отыскать в сети подходящую «жертву» — сайт с заголовками, набранными «аршинными» по размеру буквами.
+36
41007
407
Mithgol 24,5

Комментарии (30)

+2
Banzeg, #
Немного мыльно, но в целом отлично.
+1
Urvin, #
Обнаружил этот эффект два года назад. Да и неким чудом не считал.
Интересно, уже запатентовали?
+11
Mithgol, #
Остаётся лишь сожалеть о том, что два года назад Вас не было на Хабрахабре, что лишило меня и некоторых других читателей удовольствия познакомиться с обнаруженным эффектом на два года ранее.
+6
Urvin, #
Сайт я верстал и методом, вынесенным из полиграфии решил свою проблему.
Я даже не догадался бы даже публиковать. Ибо сравнимо с чудесным открытием эффекта скругления углов на иконках.
+2
Mushtat, #
Как минимум семеро читателей, а вероятно, и более уже знакомы с этим методом.
Потому согласен с Urvin.
+1
AGvin, #
Мелочь, но приятно.
+3
dshster, #
В Chrome в Windows XP сглаживание мелкого текста менялось, если добавить прозрачность шрифту, буквально:
opacity: 0.9999;

Такой приём использовался в Маркете приложений под google chrome. При правильном подборе размеров и гарнитуры можно было получить допольно красивый текст.
+2
simpel, #
Метод с text-shadow тормозит на страницах, где много текста, да и не чень компактен + нужно задавать конкретные цвета.
Я нашел другой способ:
-webkit-text-stroke: 0.35px
0
Mithgol, #
Не работает в Firefox, очевидно.
0
Mithgol, #
Впрочем, я начинаю мрачно подозревать, что и Mathieu Avons не довелось обнаружить эффект, работающий в Firefox.
+2
Aquahawk, #
Сглаживание шрифта != размытие!!! Верните мне глаза
+2
Aingis, #
Наверное, подобное сглаживание, точнее его отсутствие — одна из тех вещей, что остались со времен Windows 3.
+4
kapuletti, #
Это решение самый натуральный костыль, подойдет скорее для больших заголовков и не всегда работает хорошо.

Пока в Windows не исправят проблему с хинтингом на уровне системы — ничего не изменится.
+4
Mithgol, #
Microsoft ужé ничего и никогда не изменит в Windows XP.

Я скорее надеялся бы на то, что в браузеры станут внедрять собственную полисистемную инфраструктуру для единообразного и улучшенного отображения текста.
+1
Aingis, #
Зачем браузерам это делать? Во-первых, это большие затраты с нулевым выхлопом, во-вторых, текст будет выглядеть не так как везде в ОС. Единственный браузер, который имел такую систему: Safari под Windows.
0
frost_lab, #
> Единственный браузер, который имел такую систему: Safari под Windows.
который жутко тормозил (моё субъективное наблюдение, последние версии вроде пошустрее)
0
Grawl, #
и в результате его похоронили
0
Beholder, #
Ещё раз, gdipp
0
esc, #
оно работает далеко не везде. Выглядит еще хуже, когда у меню одно сглаживание, а у шрифтов на сайтах другое, а часть программ вообще падает(
+1
CAJAX, #
Такой костыль я видел в блогах маководов несколько лет назад. Кажется даже на хабре была ветка комментариев по поводу уместности такого приема, мол не надо нам ваше мыло на нашем клеартайпе.
0
ANtlord, #
А Вы не знаете как на QML достичь сглаженности у скругленных углов?) (Прошу прощения за слово «скругленные», использовал для избежания тавтологии)
0
titulusdesiderio, #
Как я понимаю этот метод работает только с включенным ClearType? ибо я у себя этот эффект не обнаружил.

(Скрин из FF 16, но Chrome 22 и Opera 12 дают весьма похожие результаты)
И, к слову в новом сайте Е3 этот эффект не используется (специально файербагом просмотрел)

В чём подвох?
0
Smerig, #
Может этот комент ответит на ваш вопрос: habrahabr.ru/post/154465/#comment_5263649
0
titulusdesiderio, #
chrome 22.0.1229.94 m


ff 16.0.1


opera 12.02


ie 8.0.6001.18702


Так, к слову, в ie всё не так уж и плохо, в отличае от других браузеров
0
Mithgol, #
Похоже, Файерфоксу поможет только однопиксельное размытие или что-то в этом же роде.

На сайте E3 этот эффект не используется, потому что, как я понял, Mathieu Avons ограничился критикою сайта E3 в своём блоге (с точки зрения читателя сайта) и изложил возможный путь решения проблемы, но не отсылал свой рецепт в E3 и не добивался его принятия.
0
SeVit, #
Здесь костыль, там костыль.
Хотя в последнее время количество инноваций от хрома заставляет верить, что ну ещё через пару лет и мы с радостью забудем про такие трюки.
0
loststylus, #
Статья хорошая, но… кого-то и вправду еще волнует, как будут выглядеть шрифты в XP, поддержка которой заканчивается в 2014, да и то по недоразумению?
0
Mithgol, #
Ну, например, более ⅓ посетителей LiveInternet.Ru.
0
loststylus, #
Это навевает грусть и уныние.
+1
SelenIT2, #
Но успокаивает, что при сохранении тенденций это ненадолго.

Не говоря о том, что пользователи любой ОС привыкли к тому, как обычно выглядят шрифты в ней. Разве что вечная проблема упоро упрямых заказчиков, требующих попиксельного совпадения с фотошоповским макетом…

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.