Двадцать второй урок. Подключение шрифтов

Существует группа шрифтов, которые считаются безопасными и доступными для любого браузера и операционной системы. Например:

Сам шрифт указывается css-свойством font-family:

p { font-family: Times New Roman, serif; }

Шрифты задаются перечислением через запятую, где последним указывают группу шрифта. Браузер начинает просмотр доступных шрифтов на компьтере и если шрифта нет, смотрит следующий и так до конца. Группы шрифтов бывают следующие:

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

Но, если действительно стоит задача подключить какой-то шрифт для страницы, то лучшим решением будет указание его загрузки его со специального сервиса Google Fonts. Общая схема здесь простая — вначале выбирается шрифт (или несколько), после этого получается его код для вставки в css-файл. Дальше просто указываем шрифт в стилях как обычно. Если шрифт уже установлен на компьтере пользователя, то он больше не загружается. Также часть работы делает браузер — он кэширует загруженне шрифты, тем самым избегая их повторной загрузки.

При выборе шрифта следует учесть несколько важных нюансов.

В первую очередь нужно выбрать кириллические шрифты (Languages — Cyrillic). Не все шрифты руссифицированы.

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

Многие (но не все) шрифты имеют в своём составе курсив или полужирное начертание. Если шрифта курсива нет и на странице используется тэг I, то браузер просто сделает текст наклонным, что будет выглядеть некрасиво. Поэтому для основного текста используются шрифты, которые имеют обычное начертание (regular), курсив (italic), полужирный (bold) и полужирный курсив (bold italic).

Из современных шрифтов наиболее распространены OpenSans и Ubuntu для основного текста.

После того, как шрифты выбраны, можно получить код для использования. В Google Fonts желательно выполнить дополнительную настройку (вкладка Customize), где нужно отметить курсив, полужирный, кириллицу. После этого сервис предложит код для вставки (STANDARD), что-то вроде такого (на примере OpenSans):

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic" rel="stylesheet">

Этот код не что иное, как внешний css-файл, поэтому его следует подключить в секцию HEAD страницы. После этого можно использовать так:

p { font-family: "Open Sans", sans-serif; }

Из-за того, что нужно править HEAD секцию, чаще всего используется немного другой вариант вставки — через @import (одноименная вкладка):

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic');
</style>

Этот код вставяется либо в HEAD в виде тэгов STYLE, либо прямо в свой css-файл (без STYLE):

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=cyrillic');

... остальные стили ...

Обратите внимание, что адрес самого шрифта в обоих случаях одинаковый. Если ввести его в браузере, то увидим css-код примерно такого содержания (небольшой кусок):

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBjTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

В CSS для подключения внешнего шрифта используется специальная конструкция @font-face, в которой указывается название шрифта (Open Sans), стиль начертания (italic), жирность (400 = нормальное). Параметр src задаёт url-адрес к файлу шрифта. Шрифты могут быть в разных форматах. Раньше в основном использовался ttf, но сейчас все браузеры поддерживают современный формат woff и woff2.

Google Fonts удобен тем, что вебмастеру нет необходимости создавать сложные конструкции @font-face. Даже если вы воспользуетесь каким-то другим похожим сервисом, то всё равно получите готовый код для вставки.

Существует еще один класс шрифтов — иконочный. Пример — FontAwesome, который использует UniCSS. Символы этого шрифта не текст, а иконки.

Здесь, в отличие от Google Fonts, шрифт необходимо разместить на своем сайте и правильно подключить с помощью @font-face. В UniCSS это сделано так:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome/fontawesome-webfont.woff?v470') format('woff'), url('../fonts/fontawesome/fontawesome-webfont.woff2?v470') format('woff2') ;
  font-style: normal;
  font-weight: 400;
}

Обратите внимание на путь подключения: он относительный. В отличие от относительных путей ссылок, как это мы рассматривали ранее, в css-коде пути считаются от css-файла. В данном случае у нас такое расположение каталогов на сайте:

assets/
	css/
		style.css — это наш файл с подключениями
	
	fonts/
		fontawesome/
			fontawesome-webfont.woff2 — это подключаемый файл

Текст ../ указывает на уровень выше, то есть на assets. После этого браузер сформирует адрес: assets/fonts/fontawesome/fontawesome-webfont.woff2.

Для того, чтобы использовать иконочный шрифт, нужно указать 16-ричный код его символа, поэтому они поставляются не только с woff-файлом, но и css-кодом, где прописываются классы с нужными символами. Примерно так:

.i-glass::before {
	font-family: FontAwesome;
	display: inline-block;
	content: "\f000";
}

Здесь мы видим использование псевдоэлемента ::before, которому присваивается inline-block и шрифт FontAwesome.

Задания

Задания доступны только после авторизации.