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

примечание

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

После загрузки набора @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;