Пуленепробиваемый @font-face

Современный способ внедрения шрифтов на веб-страницу.


@font-face {
 font-family: 'fontello';
 src: url('../fonts/fontello.eot');
 src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
    url('../fonts/fontello.woff') format('woff'),
    url('../fonts/fontello.ttf') format('truetype'),
    url('../fonts/fontello.svg#fontello') format('svg');
 font-weight: normal; font-style: normal;
}
/* Сглаживание */
body {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:  hidden;
  -ms-backface-visibility:   hidden;
}

Прогресс не стоит на месте, появился формат woff2

Для поддержки нового формата woff2 просто добавьте в свой @font-face новую строку:


@font-face {
	...
	url('../fonts/fontello.woff2') format('woff2'),
	...
}

Где взять весь набор шрифтов

Вы наверное заметили, что необходимо иметь несколько форматов одного и того же шрифта (если быть точным, то — 5). Само собой, что искать их в интернете совершенно нет никакой необходимости. Их можно сгенерировать при помощи Белки или Online Font Converter.

Совместимость с браузерами

  Safari IE FF Chrome Opera Android iOS
Формат TTF/OTF EOT TTF/OTF/WOFF SVG/TTF/OTF TTF/OTF TTF TTF/SVG
Версия 5.03 6+ 3.6 8 11 2.2 3.2

Возможные проблемы

Если ваш сайт использует SSL, то надо подшаманить ваш .htaccess в папке со шрифтами.

Header set Access-Control-Allow-Origin "*"
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/octet-stream .afm

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

Опера 10 при релоаде страницы сбрасывает шрифт. Если закрыть и снова открыть страницу — работает. Возможно, это связано с режимом Turbo

IE отказывается загружать шрифты, когда страница открыта локально.

RTFM

Обновление от 25.11.2016

На данном этапе google рекомендует избавиться от svg-версии шрифтов.

Теоретически, существует ещё один формат контейнера шрифтов — SVG. Однако он никогда не поддерживался в IE и Firefox, и сейчас перестает использоваться в Chrome…

Источник: https://www.kobzarev.com/makeup/the-new-bulletproof-font-face-syntax/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: