Pull to refresh

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

Reading time 2 min
Views 69K
Original author: Mathieu Avons
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 да отыскать в сети подходящую «жертву» — сайт с заголовками, набранными «аршинными» по размеру буквами.
Tags:
Hubs:
+36
Comments 30
Comments Comments 30

Articles