В этом занятии разберемся, как же выглядят шрифты в CSS, рассмотрим их основные свойства: вес, семейство, стиль, размер, вариант, а также разберемся, по какому принципу браузер выбирает необходимый шрифт.

За все шрифты в CSS отвечают следующие свойства:



Свойство FONT-FAMILY

Это свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Все шрифты по своим свойствам делятся на семейства, мы рассмотрим три из них:
Serif – шрифты с характерными «засечками», самый распространенный и яркий представитель – «Times New Roman»;
Sans-serif – шрифты рубленые, без засечек, к примеру Arial или Verdana ;
Monospace – моноширинные шрифты (с одинаковым расстоянием между символами, по типу печатной машинки), такие как «Courier New»;

На рисунке ниже собраны основные и часто используемые шрифты, сгруппированные по семействам. Причем отображены они именно так, как выглядят на самом деле, например название «Times New Roman» отображено шрифтом «Times New Roman» , ну вы поняли….

Разнообразие настроек для шрифтов в css.

Заметили, что некоторые шрифты пишутся в кавычках? Есть такое правило: «Если в названии шрифта присутствует пробел, то его мы пишем в кавычках».

h1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}

Вначале пишем приоритетный шрифт, затем менее приоритетный, а потом лучше всего прописать имя семейства. Надпись из примера выше -
h1 {font-family: verdana, arial, sans-serif;} значит, что все заголовки первого уровня будут отображаться шрифтом verdana. Если же этот шрифт не установлен, то вам покажут шрифт arial, а если же и такой отсутствет, то браузер выдаст вам любой шрифт из семейства serif.

Свойство FONT-STYLE

Это свойство задает стиль шрифта. Может принимать три значения:

  • normal – обычный;
  • italic – курсивный;
  • oblique – наклонный;

У вас не возникал вопрос: «чем отличается курсивный от наклонного?», – дело в том, что значение italic означает использование встроенного в шрифт курсивного начертания. Ведь практически каждый шрифт, включает в себя все символы и буквы в нормальном исполнении, в полужирном исполнении и в курсивном.
А значение oblique - это искусственно созданный курсив, т.е. созданный наклоном стандартных букв под определенным углом.

h1{
font-family: verdana, arial, sans-serif;
font-style:normal;
}
h2{
font-family: verdana, arial, sans-serif;
font-style:italic;
}
h3{
font-family: verdana, arial, sans-serif;
font-style:oblique;
}


Свойство FONT-VARIANT

Такое свойство используется при выборе варианта написания букв нижнего регистра, и принимает два значения:

normal – значение по умолчанию, текст будет отображаться обычным образом.
small-caps – буквы нижнего регистра отображаются как уменьшенные заглавные.

Как вы заметили большие (заглавные буквы) остаются без изменений, а маленькие – это полная копия заглавных букв, только немного меньшего размера.

По умолчанию (т.е. если вообще не записывать это свойство) текст будет отображаться обычным начертанием.

Пример записи стиля:

h1{
font-family: verdana, arial, sans-serif;
font-variant:small-caps;
}
h2{font-family: verdana, arial, sans-serif;}

С этим разобрались, двигаемся дальше.

Свойство FONT-WEIGHT

Данное свойство будет определять насыщенность шрифта. С его помощью можно сделать шрифт жирным. Основные значения: normal – обычный и bold – жирный. Некоторые браузеры поддерживают числовые значения: 100, 200,300,400,500,600,700,800,900. Для справки: 400 равносильно normal, а 700 – bold . Однако я бы не советовал вам использовать значения цифрами.

P {font-family: arial, verdana, sans-serif;}
DIV {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}


Свойство FONT-SIZE

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

Давай поработаем с заголовками:

h1 {
font-family: arial, verdana, sans-serif;
font-size: 12px;
}
h2{
font-family: arial, verdana, sans-serif;
font-size: 24px;
color: red;
}

Благодаря этому свойству можно переопределять заголовки, что очень полезно при продвижении в поисковых системах. Ведь текст в заголовке является более важным чем обычный текст.

Сокращенная запись. Свойство FONT

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

Для этого все свойства нужно записать чрез пробел в таком порядке:

font-style_ font-variant_font-weight_font-size_font-family

Пример:

P{
font-style: italic;
font-variant: normal ;
font-weight: bold;
font-size: 20px;
font-family: arial, sans-serif;
}

Давайте сделаем тоже самое, только в краткой форме:

P{ font : italic normal bold 20px arial,sans-serif; }

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

Попрактикуйтесь и будем дальше учиться.