Разработка ›› @font-face или нестандартные шрифты на сайте

Про безопасные шрифты известно всем, но это уже не актуально. Сейчас же, повсюду мы видим нестандартные шрифты, которые намного приятнее вписываются в дизайн страниц. Если раньше нужно было использовать специальные java-скрипты или делать css-спрайты, то сейчас шрифтам дан зеленый свет.

@font-face — это правило css, которое позволяет вам загружать определенный шрифт со своего компьютера, и использовать на веб-странице, если у пользователя нет того установленного шрифта. Это означает, что веб-дизайнеры больше не должны будут придерживаться определенного набора стандартных шрифтов, которые пользователь предварительно установил на своём компьютере.

Основные достоинства очевидны: сео, возможный поиск по тексту, работа с ним, не говоря уже о том, что можно работать с текстом как хочешь – line-height, letter-spacing, first-letter – всё это возможно.

Синтаксис Fontspring @Font-Face

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Свойство font-family указывает на то, как в нашей системе будет называться новый шрифт. Называть можно как угодно, главное чтобы потом можно было вспомнить, что же вы имели ввиду. Свойство src указывает на файл с самим шрифтом. Поддерживаются следующие форматы шрифтов: eot, ttf, otf, svg, woff.

В представленной таблице указано какие шрифты какими версиями браузеров поддерживаются, как видно подводных камней и тут хватает.

Инструментарий для Веб-шрифтов

Font Squirrel Генератор — это набор онлайн-инструментов, который позволяет одним махом получить архив с набором из оригинального TTF/OTF шрифта, шрифта EOT, шрифта SVG и даже шрифта WOFF! А если Вам этого показалось мало, то Вы получите еще и готовый пример HTML+CSS для вставки шрифта на вебстраницу, а также возможность некоторой оптимизации на этапе конвертации (разложение шрифта, очистка обводов, автокоррекция глифов).

На данный момент, это лучшее что есть в сети и в руках дизайнера шрифтов и веб-разработчика Ethan Dunham только продолжает улучшаться.

Сервис Google Web Fonts бесплатный и динамично развивающийся в направлении увеличения количества поддерживаемых красивых, необычных и вычурных шрифтов. Все приведенные в Google Font API онлайн шрифты распространяются по свободной лицензии и само собой данный способ их подключения к сайту будет кроссбраузерным по умолчанию.
Кириллических шрифтов на сервисе Google Fonts пока что не очень много. Думаю, что со временем вам будет из чего выбрать, а пока будем довольствоваться имеющимися, хотя набор латинских онлайн вариантов в Google web fonts уже сейчас впечатляет.

Кроме того, возможно вы захотите ознакомиться с некоторыми бесплатными утилитами, которые используются за кулисами в таких местах как Font Squirrel, Kernest и Google:

  • FontForge полновесный редактор шрифтов со всевозможными конфигурируемыми вкусностями на стороне сервера. Открытый исходный код.
  • sfnt2woff это набор утилит с открытым исходным кодом для упаковки TTF и OTF CFF шрифтов в WOFF-файлы.
  • ttf2eot это предшественник EOTFAST. Он создает несжатые «легкие» EOT-файлы.
  • TTX это средство конвертации OpenType и TrueType шрифтов в и из XML.
  • Fontue это движок с открытым исходным кодом для вывода веб-шрифтов и скриптов для обработки шрифтов. Приветствуются вклады в Github.
  • WebFont Loader это Javascript-библиотека, которая позволяет лучше контролировать загрузку шрифтов, чем позволяет Google Font API. Создана в сотрудничестве между Google и TypeKit.

P.S. И не забывайте проверять лицензии шрифтов, перед тем как использовать. А для тех кому мало ветка на habrahabr.ru.

Источники:habrahabr.ru

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *