Сглаживание шрифтов в Safari



Влад Мержевич

У разработчика сайта не так и много средств по изменению вида шрифта, в частности вообще нет способа управления сглаживанием текста. Кто не в курсе, это способ сделать буковки более гладкими за счет добавления пикселов разных цветов. Если увеличить текст в Windows, то это становится хорошо заметно (рис. 1).

Увеличенный текст

Рис. 1. Увеличенный текст

Благодаря особенности человеческого зрения мы не различаем эти отдельные пикселы, но за счет них текст становится более читабельным. В Windows используется запатентованная технология, названная ClearType, в MacOS имеется аналогичное решение, так что вроде бы беспокоиться не о чем, текст во всех браузерах выглядит одинаково. Однако Safari в свое время продемонстрировал, что может управлять текстом в обход системы, сделав его отличным от остальных браузеров. К тому же в Safari 4 появилась поддержка интересного свойства -webkit-font-smoothing, с помощью которого веб-разработчики могут указывать алгоритм сглаживания.

Чтобы это свойство себя проявило, необходимо в настройках выбрать сглаживание отличное от «Стандарт Windows» (Настройки > Внешний вид > Сглаживание шрифта), как показано на рис. 2.

Настройки сглаживания

Рис. 2. Настройки сглаживания

Вот теперь можно использовать -webkit-font-smoothing и наблюдать результат его воздействия. У этого свойства три значения:

  • none — сглаживания нет;
  • subpixel-antialiased — сильное сглаживание;
  • antialiased — среднее сглаживание.

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

Пример 1. Использование -webkit-font-smoothing

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Сглаживание текста</title>
  <style type="text/css">
   body {
    -webkit-font-smoothing: antialiased; 
   }
  </style>
 </head>
 <body>
  <p>Прошло еще немного времени, и вот наступил день, когда Кортес со
  своими завоевателями вступил в Теночтитлан. Не стану описывать всего, 
  что творили испанцы в городе, ибо это дело историка, а я рассказываю 
  лишь свою собственную историю.</p>
  <p>Генри Райдер Хаггард. Дочь Монтесумы</p>
 </body>
</html>

Результат примера показан на рис. 3.

none

а. none

subpixel-antialiased

б. subpixel-antialiased

antialiased

в. antialiased

Рис. 3. Сглаживание текста с разными значениями -webkit-font-smoothing

При значении none текст вообще потерял какую-либо читабельность, при subpixel-antialiased текст кажется жирным и это не всем нравится, antialiased дает наиболее универсальное сглаживание.

Пока перспективы использования свойств по сглаживанию текста непонятны, в CSS3 возможно появится свойство font-smooth, которое пока носит черновой статус. Браузеры не поддерживают эту возможность, за исключением движка Webkit, на котором построен Safari и Chrome.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.