Шрифты в CSS

Автор: | 16 марта, 2020

Несколько свойств, оказывающих влияние на шрифт в 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

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

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