вебмастер, фидошник
59,5
карма
0,0
рейтинг
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 да отыскать в сети подходящую «жертву» — сайт с заголовками, набранными «аршинными» по размеру буквами.
Перевод: Mathieu Avons
Mithgol the Webmaster @Mithgol
карма 59,5
рейтинг 0,0
вебмастер, фидошник
Реклама

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

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

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

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

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

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

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


ff 16.0.1


opera 12.02


ie 8.0.6001.18702


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

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

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

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

Интересные публикации

Вакансии