Пользовательские шрифты являются одним из самых привлекательных аспектов CSS3 для дизайнеров. С новым правилом @font-face, вы можете добавить любой шрифт на ваш сайт или веб-страницу, независимо от того, установлен ли этот шрифт у пользователя или нет. Конечно, можно всегда воспользоваться Google Fonts и т.д., но в данной статье речь пойдет об использовании собственного уникального или купленного шрифта.
Как и в большинстве CSS3, основной код довольно прост, но на практике для достижения максимального эффекта необходимо учесть все условия.
В этом коротком уроке мы покажем основы применения своего шрифта на веб-сайте при помощи @font-face CSS3.
Загрузите шрифт
Во-первых, убедитесь, что шрифты, которые вы хотите использовать, имеют лицензию для их использования в сети интернет. Практически все бесплатные шрифты могут быть использованы на сайтах. Но если вы купили премиум шрифт, убедитесь, что вы имеете право на его спользования онлайн для своего веб-сайта или проекта.
Далее, загрузите выбранный шрифт на вашего сервера. Вы можете хранить его в специальной папке “Шрифты” для простоты и организации, но это необязательно.
Не забудьте включить файлы для любых вариантов шрифта, который вы планируете использовать, например полужирный шрифт или курсив. Вы можете использовать EOT (Embedded OpenType) файлы для Internet Explorer и либо OTF (OpenType) или TTF (TrueType) для остальных. (Дополнительные опции включают WOFF (Web Open формат шрифта) и SVG (Scalable Vector Graphics), но мы будем придерживаться наиболее распространенных типов)
Запишите URL, где файлы шрифтов хранятся на сервере.
Добавляем font-face в коде CSS
Откройте HTML или CSS файл страницы, над которой вы работаете. Добавляем font-face код:
@font-face {
}Вначале, укажем имя нашего шрифта:
font-family: 'MyFont';
Далее, укажем месторасположение на сервере для OET шрифта:
src: url('fonts/MyFont.eot');Аналогично укажем месторасположение OTF и TTF шрифтов:
src: url('fonts/MyFont.otf');
src: url('fonts/MyFont.ttf')Это минимально необходимый код, который будет достаточен в большинстве случаев. Однако, есть дополнительные шаги которые мы можем предпринять, чтобы сделать код более надежным. Первое, добавим индикатор типа файла шрифта:
src: url('fonts/MyFont.otf') format('opentype');
src: url('fonts/MyFont.ttf') format('truetype');В качестве еще одной дополнительной меры эффективности, мы можем попросить браузер проверить, имеется ли локальная копия шрифта у пользователя. Добавим допольнительный код для того, чтобы шрифт загружался только в том случае, если это необходимо:
src:
local('My Font'),
local('My-Font'),
url('fonts/MyFont.otf') format('opentype');
src:
local('My Font'),
local('My-Font'),
url('fonts/MyFont.ttf') format('truetype');В этом случае мы имеем две строки, задающие локальные шрифты, потому что имя шрифта имеет более чем одно слово в нем. Дефис нужен для некоторых шрифтов, так как они отображаются по-разному в некоторых операционных системах – это дополнительная мера не нужна, если шрифт имеет только одно слово в его названии.
Если вы знаете, что шрифт может иметь различные названия на различных системах, следует включать каждый из возможных вариантов.
Применение шрифта для отдельных элементов страницы
Также, помимо всего сайта, мы можем применить шрифт для отдельных элементов на странице. В коде CSS для конкретного элемента или группы элементов, просто укажите имя шрифта, в том числе любые fallbacks:
div { font-family: 'MyFont', sans-serif; }Указание вариантов шрифтов
Если, например, вы хотите использовать жирную версию шрифта, просто добавьте другой font-face, URL файла шрифта и декларацию “шрифт: жирный;”:
/*обычная версия*/
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont.eot');
src:
local('My Font'),
local('My-Font'),
url('fonts/MyFont.otf')
format('opentype');
}
/*Жирный шрифт*/
@font-face {
font-family: 'MyFont';
src: url('fonts/MyFont_bold.eot');
src:
local('My Font Bold'),
local('My-Font-Bold'),
url('fonts/MyFont_bold.otf')
format('opentype');
font-weight: bold;
}
/*контейнер*/
div { font-family: 'MyFont', sans-serif; }
/*span внутри контейнера div*/
span { font-weight: bold; }Все очень просто! Теперь вы смело можете “обновить” дизайн своего веб-сайта, применив несколько красивых персональных шрифтов. Если вам помог этот урок – напишите в комментариях внизу, на каком сайте вы его применили и как он выглядит.
Высоких конверсий!
