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

Что такое семейство шрифтов font-family в CSS
image_pdfimage_print

Здравствуйте, коллеги! Сегодня мы опять рассмотрим тему, связанную с каскадными таблицами стилей (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.

В начале статьи я обещал, что поделюсь с вами бесплатным материалом. Это замечательный видеокурс по CSS от Евгения Попова, опытного вебмастера. Некоторые вопросы, который рассматриваются там:
  • Какой принцип работы с CSS?
  • Как фиксировать фон?
  • Что такое сокращенная запись?
  • Как работать со списками?
  • Как создать простой каркас на основе float?
  • И многое другое...

В этом видеокурсе содержится 45 видеоуроков! Как видите полнее информации не найти во всей всемирной паутине. Поэтому не стоит тянуть резину! Вы можете получить этот видеокурс на странице автора.

Бесплатный видеокурс по CSS


Этот блог читают уже много людей
- читай и ТЫ!

0 ответы
  1. дима
    дима says:

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

    Ответить

Ответить

Want to join the discussion?
Feel free to contribute!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *