Сглаживание веб-шрифта при помощи 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 да отыскать в сети подходящую «жертву» — сайт с заголовками, набранными «аршинными» по размеру буквами.