Нестандартные шрифты на странице при помощи @font-face

Внедрение web-шрифтов на вашу интернет-страничку по средством CSS-свойства @font-face, значительно разнообразит возможности дизайнеров сайтов.

Первая реализация встраиваемых веб-шрифтов состоялась в 1997 году с выходом на рынок браузер IE4, поддерживающий шрифты в формате EOT (Embedded OpenType). В IE4 появилась возможность встраивать шрифты .eot формата на веб-страницу при помощи CSS-свойства @font-face.

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

В 2007 году, разработчики Webkit заявили о поддержке CSS-свойства @font-face в новой версии своего движка, выбрав в качестве шрифтовых форматов .ttf и .otf. После этого последовал всплеск интереса к веб-шрифтам, появились браузеры с поддержкой @font-face и основанными на движке Webkit.

В конце 2009 года, разработчики браузера Firefox, анонсировали поддержку шрифтового формата .woff (Web Open Font Format), специально разработанного формата шрифта для веб-разработчиков, основанным на популярных форматах .ttf и .otf.

На сегодняшний день, популярны и поддерживается различными браузерами четыре основных формата шрифта: .eot, .woff, .ttf и svg.

Поддержка шрифтового формата браузерами:

Internet Explorer 4+ — .eot;
Internet Explorer 9+ — .eot/.woff;

Firefox 3.5 — .ttf/.otf;
Firefox 3.6 — .ttf/.otf/.woff;

Opera 9.6 — .svg;
Opera 10+ — .ttf/.otf/.svg;
Opera 11.1 — .ttf/.otf/.svg/.woff;

Chrome 3 — .svg;
Chrome 4+ — .svg/.ttf/.otf;
Chrome 5+ — .svg/.ttf/.otf/.woff;

Safari 3.2+ — .ttf/.otf/.svg;
Safari 5.1+ — .ttf/.otf/.svg/.woff;

iOS Safari 3.2+ (iPhone/iPad) — .svg;
iOS Safari 4.2+ (iPhone/iPad) — .svg/.ttf/.otf;
iOS Safari 5.1+ (iPhone/iPad) — .svg/.woff;

Opera Mobile 9.7 — .ttf/.otf/.svg;
Opera Mobile 11.5 — .ttf/.otf/.svg/.woff;

Android Browser 2.2+ - .ttf/.otf;
Android Browser 3 - 4.3 .svg/.ttf/.otf;
Android Browser 4.4+ .svg/.ttf/.otf/.woff;

*Источник: caniuse.com

Не секрет, что до сих пор в эпоху быстрого интернета, "вес" веб-страницы имеет большое значение. Самыми компактными форматами веб шрифта являются .eot и .woff, а самым большим - .svg. Как можно увидеть из списка поддержки формата .svg, в основном используется в мобильных браузерах.

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

Кроссбраузерный @font-face

На сегодняшний день кроссбраузерное CSS-свойство @font-face выглядит так:

@font-face{
   font-family: 'Myfont';
    src: url('fonts/myfont.eot');
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
   }

*где myfont - имя вашего шрифта.

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

Код в этом случае будет выглядеть вот так:

@font-face{
   font-family: 'Myfont';
    src: url('fonts/myfont.eot');
    src: local('Myfont'), local('PostScript-Name'),
    src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/myfont.woff') format('woff'),
    url('fonts/myfont.ttf') format('truetype'),
    url('fonts/myfont.svg#myfont') format('svg');
   }

* В свойстве local указывается имя шрифта и данные из PostScript Name. (значения данного поля шрифта можно посмотреть в FontLab Studio, TransType, FontForge или другом шрифтовом редакторе или утилите)

Политика безопасности Firefox и IE, при загрузки шрифта со стороннего ресурса.

При загрузке веб-шрифта со староннего web-ресурса, возникают проблемы в Firefox и Internet Explorer, это связано с политикой безопасности этих браузеров, и запретом загрузки шрифтов со сторонних ресурсов.

Для обхода политики безопасности эти браузеров, необходимо на вашем сервере под управлением Apache, в корневом файле .htaccess прописать следующую строку:

Access-Control-Allow-Origin *.

Ещё одной проблемой загрузки веб-шрифтов является некорректно настроенные mime типы на сервере. Для устранения ошибки в корневом файле .htaccess пишем следующие строки:

AddType font/eot .eot
AddType font/ttf .ttf
AddType font/woff .woff
AddType font/otf .otf

Свойство font-feature-settings и работа с функциями OpenType.

CSS-свойство font-feature-settings позволяет значительно расширить работу с типографикой на веб-странице, используя расширенные функции стандарта OpenType. Однако повсеместное использование этого свойства всё ещё ограничивается отсутствием поддержки со стороны производителей софта.

На сегодняшний день поддержка font-feature-settings существует в следующих браузерах:

Internet Explorer 10+;
Firefox 29+;
Chrome 27+;
Opera 22+;
Android Browser 4.4+;

Как видно из приведённого списка свойство font-feature-settings на поддерживает Safari, в мобильной и настольной редакциях. Следовательно при создании сайта необходимо внимательнее отнестись к этому обстоятельству, дабы не разочаровать и не потерять часть аудитории.

Код css для вывода стандартных лигатур:

-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga";
-webkit-font-feature-settings: "liga";
-o-font-feature-settings: "liga";
font-feature-settings: "liga";

Код css для вывода расширенных лигатур:

-moz-font-feature-settings: "dlig=1";
-ms-font-feature-settings: "dlig";
-webkit-font-feature-settings: "dlig";
-o-font-feature-settings: "dlig";
font-feature-settings: "dlig";

Код css для вывода дробей:

-moz-font-feature-settings:"frac" 1;
-moz-font-feature-settings:"frac=1";
-ms-font-feature-settings:"frac" 1;
-o-font-feature-settings:"frac" 1;
-webkit-font-feature-settings:"frac" 1;
font-feature-settings:"frac" 1;

Код css для вывода старостильных цифр:

-moz-font-feature-settings:"onum" 1;
-moz-font-feature-settings:"onum=1";
-ms-font-feature-settings:"onum" 1;
-o-font-feature-settings:"onum" 1;
-webkit-font-feature-settings:"onum" 1;
font-feature-settings:"onum" 1;

Код css для вывода капители:

-moz-font-feature-settings:"smcp" 1;
-moz-font-feature-settings:"smcp=1";
-ms-font-feature-settings:"smcp" 1;
-o-font-feature-settings:"smcp" 1;
-webkit-font-feature-settings:"smcp" 1;
font-feature-settings:"smcp" 1;

Код css для вывода концовок и росчерков:

-moz-font-feature-settings:"swsh" 1;
-moz-font-feature-settings:"swsh=1";
-ms-font-feature-settings:"swsh" 1;
-o-font-feature-settings:"swsh" 1;
-webkit-font-feature-settings:"swsh" 1;
font-feature-settings:"swsh" 1;

Код css для вывода надстрочных символов:

-moz-font-feature-settings:"sups" 1;
-moz-font-feature-settings:"sups=1";
-ms-font-feature-settings:"sups" 1;
-o-font-feature-settings:"sups" 1;
-webkit-font-feature-settings:"sups" 1;
font-feature-settings:"sups" 1;

Код css для вывода подстрочных символов:

-moz-font-feature-settings:"subs" 1;
-moz-font-feature-settings:"subs=1";
-ms-font-feature-settings:"subs" 1;
-o-font-feature-settings:"subs" 1;
-webkit-font-feature-settings:"subs" 1;
font-feature-settings:"subs" 1;

Код css для вывода кернинговых пар из таблицы 'kern':

-moz-font-feature-settings:"kern" 1;
-moz-font-feature-settings:"kern=1";
-ms-font-feature-settings:"kern" 1;
-o-font-feature-settings:"kern" 1;
-webkit-font-feature-settings:"kern" 1;
font-feature-settings:"kern" 1;

Код css для вывода контекстных альтернатив:

-moz-font-feature-settings:"calt" 1;
-moz-font-feature-settings:"calt=1";
-ms-font-feature-settings:"calt" 1;
-o-font-feature-settings:"calt" 1;
-webkit-font-feature-settings:"calt" 1;
font-feature-settings:"calt" 1;

Код css для вывода стилистических альтернатив:

-moz-font-feature-settings:"salt" 1;
-moz-font-feature-settings:"salt=1";
-ms-font-feature-settings:"salt" 1;
-o-font-feature-settings:"salt" 1;
-webkit-font-feature-settings:"salt" 1;
font-feature-settings:"salt" 1;

Код css для вывода стилистических наборов (в данном случае 2-й набор):

-moz-font-feature-settings:"ss02" 1;
-moz-font-feature-settings:"ss02=1";
-ms-font-feature-settings:"ss02" 1;
-o-font-feature-settings:"ss02" 1;
-webkit-font-feature-settings:"ss02" 1;
font-feature-settings:"ss02" 1;

Продолжение следует...