 |
|
Урок 4: Шрифты в CSS
За шрифты в CSS отвечают следующие свойства:
font-family
font-style
font-variant
font-weight
font-size
font
Свойство FONT-FAMILY
Данное свойство определяет гарнитуру шрифта. Шрифты по тем или иным признакам, объединяются в семейства.
Три основных семейства:
Serif - шрифты с характерными "засечками", наиболее яркий представитель - "Times New Roman";
Sans-serif - шрифты рубленые, без засечек, например Arial или Verdana ;
Monospace - моноширинные шрифты (с одинаковым расстоянием между символами, наподобие печатной машинки), такие как "Courier New";
Есть такое правило: "Если в названии шрифта встречаются пробелы, то его следует заключать в кавычки" .
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 – наклонный (искусственно созданный курсив, т.е. созданный наклоном стандартных букв на определенный угол);
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
C его помощью можно регулировать размер шрифта. В качестве единиц измерения лучше всего использовать пикселы, т.к. это универсальный способ и во всех браузерах вы увидите одинаковый результат, а это самое главное.
h1 {font-family: arial, verdana, sans-serif; font-size: 18px;}
h2{font-family: arial, verdana, sans-serif;font-size: 36px;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: 30px;font-family: arial, sans-serif;}
А теперь то же самое в краткой форме:
P{ font : italic normal bold 30px arial,sans-serif; }