Свойство CSS font-family. Выбор и подключение веб-шрифтов

Текстовый контент – это важная часть сайта. Посетителям нужны курьезные публикации, интересные статьи или новые рецепты пирожков. Одним словом то, что они могут прочесть. Но текст нужно уметь грамотно оформить. Никто не захочет читать ваши статьи, если шрифт отвратительно подобран, а буквы слишком мелкие.

Выбор начертания

Быстрый способ увеличить привлекательность контента – это выбрать красивое начертание шрифта, или свойство CSS font-family:

h1{
font-family: Verdana;
}

Сначала вы указываете селектор, для которого применяется свойство. В данном примере это заголовок первого уровня <h1>. После font-family и двоеточия пишете название шрифта, который хотите употребить у себя на сайте. Но посетители странички увидят этот шрифт только в том случае, если он предустановлен у них на компьютере или телефоне.

Есть группы шрифтов, которые имеются на устройствах каждого пользователя. Например, Arial, Helvetica и, конечно, Times New Roman. Дизайнеры делят их на четыре типа.

Четыре семейства шрифтов

Первый – это антиквенный, или шрифт с засечками. Отлично подходит для длинных статей. Маленькие штрихи на концах «связывают» буквы и делают текст приятным для глаз и легко читаемым. К этой группе относятся: Times, Garamond, Baskerville, Georgia.

Если вы не знаете, какое сочетание выбрать, попробуйте следующий набор для CSS font-family:

font-family: Baskerville, Palatino Linotype, Times, serif;

Следующая большая группа шрифтов – sans-serif, или рубленые шрифты. В них нет засечек, они смотрятся не так витиевато, как антиквенные, но четко и понятно. Всегда используйте их для заголовков. Самыми популярными представителями являются CSS font-family Arial, Tahoma, Helvetica и Verdana.

Не так часто, как два предыдущих типа, используют моноширинные и декоративные шрифты. У моноширинного начертания одинаковая ширина символов, и они похожи на буквы печатных механических машинок. Нужны для отображения специального кода, например CSS. К font-family таких шрифтов относят Courier, Copperplate Light, Copperplate Gothic Light.

С декоративными шрифтами будьте осторожней. Избыточное количество декорированного текста делает из веб-страницы ярмарочного зазывалу. Но если невтерпеж, то внешний вид должен соответствовать контексту. Заголовок с CSS font-family Comic Sans MS будет нелепо смотреться на сайте о циркулярных пилах.

Веб-шрифты

Интернет был бы очень скучным местом, если бы каждый заголовок был набран в Arial, а каждая статья в Times New Roman. На радость дизайнерам, современные браузеры поддерживают веб-шрифты. Отличаются от десктопных (установленных на компьютере) форматом. Для настольных приложений, таких как “Фотошоп”, “Ворд”, “Иллюстратор”, используются файлы с расширением .otf .ttf или .ps1. Для работы в интернете нужны форматы TrueType, WOFF, EOT и SVG.

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

@font-face{
	font-family: 'Roboto';
	src: url('../fonts/roboto_family/Roboto/Roboto-Italic.woff');
	font-style: italic;
	font-weight: normal;
}

Всемирная паутина изобилует ресурсами со всевозможной платной и бесплатной типографикой. Самым простым, бесплатным и порой оптимальным решением будет использование Google Fonts. Переходите на сайт fonts.google.com и выберите то что вам нравится. Возле названия есть кнопка в виде красного "+", нажмите ее, и шрифт выбран. Можете не ограничивать себя и добавить сразу пять или десять семейств.

В нижней части экрана расположено всплывающее окно черного цвета с надписью family selected. Активируйте его, и у вас появится ссылка наподобие:

<link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet">

И отдельные записи выбранных семейств:

font-family: 'Open Sans', sans-serif;
font-family: 'Notable', sans-serif;

Ссылку вставляйте в HTML-разметку в раздел <head>:

<!doctype html>
<html>
<head>
	<title>Signification</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="sign.css">
	<link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet">
</head>
<body>
</body>
</html>

Затем используйте шрифты в CSS. Font-family, выбранные на Google Font, назначаются селектором элементов с текстом. Например, у вас есть несколько абзацев с текстом и заголовок:

p{
font-family: 'Open Sans', sans-serif;
}
h1{
font-family: 'Notable', sans-serif;
}

Правило @font-face

Если вы не хотите, чтобы работоспособность вашего сайта зависела от внешних ресурсов, подключайте типографику через @font-face. Сначала скачайте файлы на свою локальную машину. Поместите их в рабочий каталог сайта, лучше в отдельную папку fonts. Откройте CSS и пропишите правило @font-face. В font-family укажите название шрифта, в src путь к файлам.

@font-face {
font-family: 'League Gothic';
src: url('fonts/League_Gothic-webfont.eot');
src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embeddedopentype'),
url('fonts/League_Gothic-webfont.woff2') format('woff2'),
url('fonts/League_Gothic-webfont.woff') format('woff'),
url('fonts/League_Gothic-webfont.ttf') format('truetype'),
url('fonts/League_Gothic-webfont.svg') format('svg');
}

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

Чирченко Ася 22 сентября, 2018