Подключение нестандартных шрифтов



В этой статье мы расскажем обо всех особенностях подключения шрифтов. От форматов до кроссдоменности. Разберемся с оптимизацией и дескрипторами. Это будет выжимка из нашего опыта работы над проектом.
Форматы файлов шрифтов
На сегодняшний день разными браузерами и платформами в той или иной мере поддерживаются форматы eot, woff, ttf, svg.
 
eot - для Internet Explorer <= 8
woff - для Firefox, Internet Explorer >= 9 и декстопных браузеров на webkit (Chrome, Safari и т.д.)
ttf - поддерживается всеми браузерами за исключением IE (всех версий)
svg  - поддерживается всеми браузерами на webkit, включая мобильные
 
Самыми легковесными являются форматы woff и eot. Например, разница между woff и ttf может достигать 100%.

Кроссбраузерный @font-face
Исходя из поддержки форматов браузерами, мы теперь можем составить @font-face, который будет работать везде, включая мобильные браузеры.

@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff'),
         url('ptsans.ttf') format('truetype');

}


Оптимизация
Разобравшись с форматами и подключением, давайте приступим к оптимизации. Из первого пункта мы уже узнали, что самые легковесные форматы — это woff и eot, которых хватает как раз для того, чтобы покрыть все существующие десктопные браузеры. Таким образом, если вы не планируете поддерживать мобильные устройства, то font-face будет выглядеть вот так:
 
@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');

}


Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.
 
Вот такая запись font-face проверит наличие шрифта на компьютере:
 
@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: local('PT Sans'), local('PTSans-Regular'), 
         url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

Для мобильных браузеров, в которых работает ttf, используйте gzip-сжатие файлов шрифтов. В результате вы получите экономию в весе до 40%.

Кроссдоменность
Шрифты — это статика, которую многие предпочитают хранить на каком-нибудь отдельном домене, где настроено кэширование, или на стороннем хранилище(в облаке). Однако при загрузке шрифта с другого домена возникают проблемы в Firefox и Internet Explorer. Все дело в политике безопасности этих браузеров, они не позволяют загружать шрифты со сторонних доменов и даже с поддоменов.
 
Проблему можно решить переводом шрифта в base64 и поместить его в CSS. При этом надо учитывать, что шрифт в base64 весит больше оригинала и он загрузится всегда, в независимости от того используется он на загружаемой странице или нет.
 
Еще одним решением проблемы является управление политикой безопасности на домене, с которого идет загрузка файла шрифта. Для сервера на Apache в .htaccess можно прописать Access-Control-Allow-Origin *. Такая запись позволит всем доменам загружать контент с отдающего сервера. Для IE и Firefox этого достаточно.
 
Существует два способа вывода подключаемого шрифта на страницу: использовать уникальный font-family для каждого начертания и применение font-weight\font-style.

Уникальный font-family
Примером этому служит известный сервис fontsquirrel.com, который генерирует вот такие наборы:
 
@font-face {
    font-family: 'droid_serifregular';
    src: url('droidserif-regular.eot');
    src: url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Для того, чтобы вывести шрифт на страницу, необходимо в нужном селекторе написать соответствующий font-family

p { font-family: 'droid_serifregular'; }
i { font-family: 'droid_serifitalic'; }

Насколько это удобно — пусть каждый решает сам. Нас в этом случае интересует совсем другая проблема — проблема «псевдо-жирного» и «псевдо-италика».
 
Дело в том, что браузеры, не найдя нужного файла для соответствующих начертаний, начинают самовольничать, утолщая и наклоняя текст.
 
Примеры:


Слева показана работа браузера, справа оригинальные начертания

Такие ситуации могут возникать, когда в параграфе с droid_serifregular появляется текст в тегах <b></b> и <i></i>, или в том случае, когда селектор унаследует italic или bold от своего родителя. Избежать этого можно, если заранее задавать тегам и всем селекторам, где используются эти начертания, соответствующие font-family.

Применение font-weight\font-style
Весь фокус подхода в том, что для начертаний задается одинаковый font-family, но разные сочетания свойств. Пример font-face:
 
@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-regular.eot');
    src: url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-italic.eot');
    src: url('droidserif-italic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-italic.woff') format('woff'),
         url('droidserif-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

По сути, указывая значения для font-weight и font-style, мы создаем «ключ», по которому браузер будет искать нужный файл для указанного в селекторе начертания.
 
Например:
 
p {
    font-family: 'Droid Serif';
    font-weight: normal;
    font-style: normal;
}

и
 
p {
    font-family: 'Droid Serif';
    font-weight: normal;
    font-style: italic;
}

Встречая «ключ», браузер по нему обратится к font-face с соответствтующими значениями и применит нужный файл. Таким образом, в первом случае будет выведено начертание regular, а во втором italic. Этот способ более универсален и исключает ситуации с псевдоначертаниями. Кроме того, font-family можно задать единожды для всего документа или блока, а внутри него уже управлять свойствами или отдать все на откуп тегам.

На заметку
— по умолчанию большинство тегов имеет font-weight: normal и font-style: normal;
— популярные теги, которые включают bold: <b>, <strong>, заголовки <h1><h6>;
— популярные теги, которые включают italic: <i>, <em>;
— список значений font-weight: 100|200|300|400|500|600|700|800|900;
— опциональные значения font-weight: bolder|lighter изменяют жирность относительно родителя в обе стороны соответственно(см. табличку ниже);
— font-weight: normal соответствует значению 400, для bold - 700;

 исходное значение bolder lighter
 100  400  100
 200  400  100
 300  400  100
 400  700  100
 500  700  100
 600  900  400
 700  900  400
 800  900  700
 900  900  700













Недостатки способов
Как подметили выше, применять уникальный font-family можно, но в этом случае надо продумать все варианты использования начертаний на странице, учесть наследование свойств и применение тегов.
 
Проблема второго способа — невозможность задать в IE <=8 больше четырех «ключей» для одного font-family.

Итого
Исходя из всех плюсов и минусов, мы пришли к выводу, что использование «ключей» наиболее предсказуемый и правильный вариант подключения шрифта. Проблемой в старых IE можно пренебречь. Все же ситуации, когда надо использовать много начертаний, встречаются редко. А в случае, когда это необходимо, использовать первый вариант. Результирующий, кроссбраузерный font-face для четырех начертаний выглядит так:

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-regular.eot');
    src: local('Droid Serif'), local('DroidSerif'), 
         url('droidserif-regular.eot?#iefix') format('embedded-opentype'),
         url('droidserif-regular.woff') format('woff'),
         url('droidserif-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-bold.eot');
    src: local('Droid Serif Bold'), local('DroidSerif-Bold'), 
         url('droidserif-bold.eot?#iefix') format('embedded-opentype'),
         url('droidserif-bold.woff') format('woff'),
         url('droidserif-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-italic.eot');
    src: local('Droid Serif Italic'), local('DroidSerif-Italic'), 
         url('droidserif-italic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-italic.woff') format('woff'),
         url('droidserif-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Droid Serif';
    src: url('droidserif-bolditalic.eot');
    src: local('Droid Serif Bold Italic'), local('DroidSerif-BoldItalic'), 
         url('droidserif-bolditalic.eot?#iefix') format('embedded-opentype'),
         url('droidserif-bolditalic.woff') format('woff'),
         url('droidserif-bolditalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
 
Orphus Обнаружили ошибку в тексте? Выделите её и нажмите Ctrl+Enter.