Сглаживание веб-шрифтов на CSS


Сглаживание веб-шрифтов на CSS

Основное содержание контента на сайте – это текст и с ним должно быть удобно работать. Для того чтобы понять, каким должен быть шрифт на вебе достаточно взглянуть на книгу с хорошей типографикой. Соответственно, хороший веб-шрифт должен быть оптимального размера с отрегулированным межстрочным интервалом, кернингом и контрастировать с подложкой.

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

В случае, если нужно использовать сторонний шрифт, например, с «Google.Fonts», то наиболее надежный метод – это создание полного набора форматов шрифта, включая SVG. Можно использовать его, например, только для заголовков.

Если шрифт стандартный, то можно сразу перейти к CSS-методу, расположенному ниже, так как он очень прост и понятен.


Основные CSS-методы, которыми можно сделать шрифт более читаемым

CSS метод

Данный метод весьма минималистичен, ведь для его реализации достаточно 3 строки кода и присвоить класс «title» к сглаживаемому тексту. Сглаживание текста происходит за счет тени и применимо, разве что, для заголовков. Данный метод можно расценивать как «хак».

.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);} 

CSS3 метод

При решении проблемы сглаживания шрифтов в движке «Сhromium», на Google.Code один программист предложил быстрое решение на CSS3. Это оказалось весьма рационально, ведь можно отказаться от SVG и сторонних веб-шрифтов шрифтов, которые весят порядка 200~500 Кб и требуют дополнительного времени загрузки.

Данный код нужно добавить в css-файл:

body {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;}

* этот хинт используется для всех заголовков данного сайта

Данный способ имеет пару недостатков:

  • не работает на старых версиях Chrome ниже 21
  • расстояние между буквами (кернинг) шрифта может слегка поменяться

  • Проблему с кернингом можно решить примерно таким css-кодом:

    body {
      font-size: 125%;
      letter-spacing: 0.05em;
      line-height: 1.3em;}
    
    body>* {
      font-size: 85%;
      line-height: 1.3em;}
    

    * разумеется, данные параметры нужно слегка настроить под особенности сайта

    Какой метод и каким образом применить - решение индивидуальное. Но результат один - красивые шрифты и довольные читатели.
    Если конечно, браузер обновленный.

    На данный момент я использую полный набор шрифтов на сайте, в том числе и SVG, так как способ надежнее и скорость хостинга позволяет. Со временем, когда «ли.ру» скажет, что обычный пользователь рунета использует достаточно свежую версию браузера, задумаюсь о переходе на чистый CSS-метод.

    Использование SVG-шрифтов и @font-face это уже другая история.


    Опубликовано: 22 Apr 2013 | Обновлено: 17 May 2013 | Теги: webfont, font, css, svg, typography