Что такое font-family в CSS?

Здравствуйте, коллеги! Сегодня мы опять рассмотрим тему, связанную с каскадными таблицами стилей (CSS). Хочу напомнить, что в прошлый раз мы касались темы цвета в CSS. Сегодня мы поговорим об шрифтах, а именно об одном свойстве font-family. Да, эта статья будет очень узконаправленной. Если вы хотите получить более объемную информацию о каскадных таблицах стилей, то материал, который я приведу в конце статьи будет вам кстати. А теперь перейдем к нашей теме беседы.

Свойство font-family позволяет Вам определять семейство для Ваших шрифтов. Иногда, по крайней мере в HTML, семейство шрифтов относят к внешнему виду шрифта. Большинство людей скажет, что семество шрифтов относиться к названию шрифтов, таких как Times New Roman, Arial или Verdana.

Многие люди часто удивляются, почему это свойство называется font-family, а не font-name или font-face, или что-то подобное? Я постараюсь объяснить, почему это так. Например, у меня в системе определены два шрифта «Verdana» и «Verdana Bold». В действительности это два самостоятельны и различных шрифта.

Они хранятся в двух разных файлах на моём компьютере. Хотя эти шрифты имеют различные названия («Verdana» и «Verdana Bold»), они находятся в одной и тоом же «семействе». Оба принадлежат к одному и тому же семейству «Verdana». Поэтому, если мы хотим определить фонт Verdana на нашей вебстранице, мы определяем это свойство font-family следующим образом:

font-family: verdana, sans-serif;

Вы можете удивиться и сказать: «Хорошо, ну зачем же здесь запятая? И что здесь делает sans-serif?». Это, так называемый запасной или резервный шрифт. CSS имеет такую отличную особенность, когда определяет свойство font-family.

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

Шрифт не загружается вместе со страницей, он просто вызывается из операционной системы. Поэтому, когда пишут таблицу CSS и определяют свойство font-family обычно указывают, хотя бы один резервный шрифт, а во многих случаях и два. Поэтому, мой резервный шрифт sans-serif.

Вы также можете возразить, сказав: «Я никогда не слышал до этого о таком шрифте, как sans-serif? Я думал, что sans-serif это тип шрифта». Конечно, Вы правы! Sans-serif это тип шрифта, но в нашем случае он используется как одно из семейств шрифтов в CSS. Создатели CSS позволили нам использовать 5 специальных терминов в определении свойства font-family, чтобы установить общие семейства шрифтов.

Вот они:

serif 
sans-serif
cursive
fantasy
monospace

Общие семейства шрифтов по существу только «типы» шрифтов (шрифты, которые имеют определенные особенности). Они не являются названиями шрифтов, они дают особенные «указания» веб-страницам, говоря: «Дай мне этот тип шрифта, я не уверен в этом типе шрифта, но этот точно подходит».

В моем случае я прошу тип sans-serif. В большинстве случаев веб-браузеры обойдут или Verdana, или Arial, потому что более часто используются шрифты семейства sans-serif.