Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Сейчас, чтобы охватить различные браузерные реализации, необходимо обслуживать несколько файловых версий одного и того же шрифта.

Но есть и хорошая новость: добавление каждого пользовательского шрифта для любого браузера не составляет особого труда. Посмотрим, как это делается!

Реализация веб-шрифтов с помощью @font-face

CSS предоставляет так называемое эт-правило (по названию символа @ — «эт») @font-face, позволяющее ссылаться на онлайн-шрифты, которые затем можно будет использовать для отображения текста.

Существует большое количество великолепных источников, позволяющих просматривать и получать веб-шрифты, среди которых как бесплатные, так и платные. Что касается источников бесплатных шрифтов, то я отдаю предпочтение Font Squirrel (http://www.fontsquirrel.com/), хотя Google также предоставляет бесплатные веб-шрифты, которые в конечном счете подаются с помощью правила @font-face (http://www.google.com/webfonts). Существуют также отличные платные сервисы от Typekit (http://www.typekit.com/) и Font Deck (http://www.fontdeck.com/).

Для данного упражнения я собираюсь загрузить Roboto. Это шрифт, используемый последними Android-телефонами, и если у вас имеется такой телефон, он должен быть вам знаком. В противном случае все, что вам нужно знать о нем, сводится к тому, что это весьма привлекательный шрифт интерфейса, разработанный для обеспечения высокой разборчивости на небольших экранах. Вы сами можете его получить по адресу http://www.fontsquirrel.com/fonts/roboto.

примечание

Если есть возможность загрузить поднабор своего шрифта, применяемый для языка, который вы собираетесь использовать, именно так и нужно сделать. Это означает, что в результате будет получен файл, намного меньший по размеру, чем тот файл, в котором содержатся образы символов для языков, которые вы не собираетесь использовать.

После загрузки набора @font-face загляните в ZIP-файл, где обнаружатся папки различных шрифтов Roboto. Я выбираю версию Roboto Regular. Внутри этой папки шрифт присутствует в различных файловых форматах (WOFF, TTF, EOT и SVG), вдобавок там имеется файл stylesheet.css, содержащий стек шрифтов. Например, правило для Roboto Regular имеет следующий вид:

@font-face {

font-family: 'robotoregular';

src: url('Roboto-Regular-webfont.eot');

src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),

url('Roboto-Regular-webfont.woff') format('woff'),

url('Roboto-Regular-webfont.ttf') format('truetype'),

url('Roboto-Regular-webfont.svg#robotoregular')

format('svg');

font-weight: normal;

font-style: normal;

}

Во многом по такому же принципу, как и при работе с префиксами производителей, браузер будет применять стили из этого перечня свойств (начиная с имеющего приоритет самого нижнего свойства, если оно применимо), игнорируя те из них, которые ему непонятны. Поэтому, какой бы браузер ни применялся, использоваться будет тот шрифт, которым он сможет воспользоваться.

Теперь, несмотря на то что этот блок кода вполне достоин копирования и вставки, важно обратить внимание на пути, по которым можно найти сохраненные шрифты. Например, я склонен копировать шрифты из ZIP-файла и сохранять их в папке с незатейливым названием fonts, находящейся на том же уровне, что и моя папка css. Следовательно, поскольку я обычно копирую это правило со стеком шрифтов в свою основную таблицу стилей, мне нужно изменить пути. И тогда правило приобретет следующий вид:

@font-face {

font-family: 'robotoregular';

src: url('../fonts/Roboto-Regular-webfont.eot');

src: url('../fonts/Roboto-Regular-webfont.eot?#iefix')

format('embedded-opentype'),

url('../fonts/Roboto-Regular-webfont.woff') format('woff'),

url('../fonts/Roboto-Regular-webfont.ttf')

format('truetype'),

url('../fonts/Roboto-Regular-webfont.svg#robotoregular')

format('svg');

font-weight: normal;

font-style: normal;

}

Затем наступает время установки для соответствующего правила стилевого оформления нужного шрифта и его плотности (если необходимо). Посмотрите на файл примера из каталога example_05-10 — там такая же разметка, как и в файле примера из каталога example_05-09, мы просто объявляем это семейство шрифтов в качестве исходного:

body {

font-family: robotoregular;

}

Дополнительное преимущество веб-шрифтов проявляется в том, что, если в комплексе используются те же шрифты, что и в вашем коде, вы можете подключить размеры непосредственно из файла комплекса. Например, если в Photoshop размер шрифта составляет 24 пиксела, мы либо подключаем это значение в неизменном виде, либо переводим его в более гибкую единицу измерения, такую как rem (при условии, что размер основного шрифта составляет 16 пикселов, 24 / 16 = 1,5 rem).

Но, как упоминалось ранее, теперь в нашем распоряжении есть размеры, задаваемые относительно размеров окна просмотра. Здесь ими можно воспользоваться для масштабирования текста относительно размеров окна просмотра:

body {

font-family: robotoregular;

font-size: 2.1vw;

}

@media (min-width: 45rem) {

html,

body {

max-width: 50.75rem;

font-size: 1.8vw;

}

}

@media (min-width: 55rem) {

html,

body {

max-width: 78.75rem;

font-size: 1.7vw;

}

}

Если открыть этот пример в браузере и изменить размеры окна просмотра, можно увидеть, что благодаря всего лишь нескольким строкам кода CSS мы получили текст, масштабируемый под доступное пространство. Великолепно!

Предостережение, касающееся пользовательского шрифтового оформления с применением @font-face в адаптивных веб-конструкциях

В целом метод шрифтового оформления веб-приложений @font-face представляется весьма эффективным средством. Единственное предостережение, касающееся использования этой технологии с адаптивными конструкциями, относится к размеру файла шрифта. Если устройство, на экран которого выводится наш пример, требует для шрифта Roboto Regular формата SVG, то по сравнению с применением стандартных веб-безопасных шрифтов, например Arial, необходимо извлечь дополнительные 34 Кбайт данных. Нами в примере использовался английский поднабор символов, что сократило размер файла, но такая возможность предоставляется далеко не всегда. Если нужно добиться от сайта наивысшей производительности, следует контролировать размеры пользовательских шрифтов и разумно подходить к их использованию.