Что такое 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.

  1. дима говорит:

    Softmaker хочу задать вам вопрос по поводу вёрстки сайта.
    вы тут?

  2. Softmaker говорит:

    Здравствуйте, Дима! Пожалуйста!

  3. дима говорит:

    спасибо,
    надо было срочно и не у кого было спросить, и гугл не помог. я уже обошел эту проблему. просто у меня нет ни одного знакомого программиста, и форум подходящий не могу себе подобрать, вот и решил вас потревожить.
    раз вы откликнулись, то всё же спрошу (хоть это уже не так критично важно). у меня не получалось создать высоту ячейки в таблице меньше 20px. писал от 1px до 20px в браузере всё равно высота ячейки отображается 20px. (смотрел в Firefox, Chrome, Opera, IE.) а если писать больше 20 то выводиться столько сколько напишешь. вот я и не мог понять, толи денвер глючит, толи вирус подхватил, или это нормально, и браузеры высоту меньше 20px выводят как 20

  4. Softmaker говорит:

    Можно посмотреть кусочек Вашего html кода?

  5. дима говорит:

    значит этого не нормально?
    куда кусочек кода выложить, в комменты?