Сглаживание веб-шрифтов на 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 метод

    Потребуется генератор веб-шрифтов fontsquirrel.com/tools/webfont-generator

    Нужно загрузить нужный шрифт в формате «.otf или .ttf» и выставить данные настройки:

    Генератор веб-шрифтов

    Согласиться с требованиями и нажать «DOWNLOAD YOUR KIT»

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

    CSS-код для подключения шрифтов, который можно вынести в отдельный файл:

    @font-face {
      font-family: 'Open Sans'; 
      src: url('/font/opensans.eot');
      src: url('/font/opensans.eot?#iefix') format('embedded-opentype'),
      url('/font/opensans.woff') format('woff'),
      url('/font/opensans.ttf') format('truetype'),
      url('/font/opensans.svg#OpenSansRegular') format('svg');
      font-style: normal;
      font-weight: normal;
    }
    

    * в данном случае все шрифты Open Sans лежат в папке «font» в корне сайта

    Пару простых хинтов:

  • Минимально для сглаживания достаточно присоединить только только «woff» и «svg» шрифты
  • Чтобы не подгружать шрифт можно закомментировать всю строку в /* адрес шрифта */
  • На «FontSquirrel» можно покопаться в настройках и исключить лишнее из шрифтов
  • Параметры font-family, font-style, font-weight можно настраивать опционально


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


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