Несколько свойств, оказывающих влияние на шрифт в CSS: семейство, стиль, вариант, вес, размер.

Принципы по которым браузер определяет использование нужного шрифта.

Содержание:


Свойство FONT-FAMILY

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

Возможно Вы замечали, что некоторые шрифты заключаются в кавычки? Существует правило: "Если в названии шрифта имеется пробел, то его следует заключить в кавычки" .

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

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


Свойство FONT-STYLE

С помощью данного свойства задается стиль шрифта:
normal - обычный;
italic - курсивный;
oblique - наклонный.

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

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

Свойство FONT-VARIANT

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

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

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

Свойство FONT-WEIGHT

Обозначает насыщенность шрифта.
Значения: normal - обычный и bold - жирный.

H1 {font-family: arial, helvetica, sans-serif;}
p {
font-family: arial, helvetica, sans-serif;
font-weight: bold;
}

Свойство FONT-SIZE

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

Например, сделаем все заголовки 18px, а основной текст 14px:

h1 {
font-family: arial, helvetica, sans-serif;
font-size: 18px;
}
p{
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}

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

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

Значения всех свойств следует расположить в строгой последовательности:

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

Например данную запись:

P{
font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 14px;
font-family: verdana, sans-serif;
}

Можно записать так:

P{ font : italic small-caps bold 14px verdana,sans-serif; }

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

СледующаяОформление текста в CSS

ПредыдущаяЦвет фона и текста в CSS