Несколько свойств, оказывающих влияние на шрифт в 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; }
Важно: все значения должны указывать именно в такой последовательности и обязательно через пробел. Если пропустить какое-нибудь свойство – ему присвоится значение по умолчанию.
