На сегодняшний день насчитывается множество веб-сайтов, содержащих элементы оформления из шрифтов, которые отсутствуют на компьютере пользователя. Это действо предусматривает необходимость подключить шрифт к сайту. При запросе страницы шрифты будут передаваться пользователю, а затем отрисовываться в браузере пользователя. Подключать шрифты можно в любом количестве. Это означает, что можно использовать одновременно несколько шрифтов на одном сайте, однако есть кое-какие нюансы в чрезмерном употреблении подключаемых шрифтов, которые могут повлиять на скорость загрузки сайта.
Принцип использования сторонних шрифтов аналогичен шрифтам, которые уже были у пользователя на компьютере. Отличие лишь в том, что нам предстоит предварительно подключить шрифт в CSS перед его использованием. Задавать имя шрифта мы можем произвольно, и использовать его по всем CSS-файлам, подключаемым после объявления нового шрифта.
Для того чтобы подключить шрифт в CSS, используется правило:
@font-face { /* свойства шрифта */ }.
Конструкция @font-face может содержать несколько свойств, которые определяют параметры шрифта, к примеру, такие как font-family, font-size, font-style. Основное свойство это ссылка на сам файл шрифта, указывается в виде src: путь_к_файлу_шрифта. Путь к файлу может быть относительным, либо абсолютным.
Пример, как подключить шрифт в CSS:
@font-face {
font-family:'DINProLt';
font-style:lighter;
src:url(fonts/DINPro-Light.woff) format('woff');
}
@font-face {
font-family:'DINProB';
font-style:bolder;
src:url(fonts/DINPro-Black.woff) format('woff');
}
Далее мы можем воспользоваться им для оформления:
p { font-family:DINProLt; }
b { font-family:DINProB; }
В целом это будет выглядеть таким образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Как подключить шрифт в css?</title>
<style>
@font-face {
font-family:'DINProLt';
font-style:lighter;
src:url(fonts/DINPro-Light.woff) format('woff');
}
@font-face {
font-family:'DINProB';
font-style:bolder;
src:url(fonts/DINPro-Black.woff) format('woff');
}
p { font-family:DINProLt; }
b { font-family:DINProB; }
</style>
</head>
<body>
<p>Этот текст будет оформлен шрифтом, который был присвоен тегу p</p>
<b>Этот текст будет оформлен шрифтом, который был присвоен тегу b</b>
</body>
</html>
Просмотреть рабочий пример вы можете по этой ссылке.
