Войти
» » » Шрифты в CSS

Шрифты в CSS

Шрифты в CSS

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

FONT-FAMILY

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

На рисунке изображены основные семейства и их хароктерные свойства:

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

Пример правильного прописывания шрифта:
Н1 {font-family: verdana, arial, sans-serif;}
p {font-family: "Times New Roman", serif;}
body{ font-family: cambria, Arial; }

FONT-STYLE

Это свойство отвечает за написание стиля шрифта, их бывает все три: обычный, курсивный и жирный; курсивный и наклонный можно объединять.

Пример:
h1{font-style:normal;} – шрифт будет обычный, его можно и не прописывать, если по умолчанию в «body» вы не прописали другое значение.
h2{font-style:italic ;} – шрифт будет курсивный.
h3{font-style: oblique;} – шрифт будет наклонный

FONT-VARIANT

Данное свойство используется для выбора варианта написания букв нижнего регистра, их существует всего два:
- normal - значение по умолчанию, текст отображается обычным образом.
- small-caps - буквы нижнего регистра отображаются как уменьшенные заглавные. (другими словами, маленькие буквы будут выглядеть по форме как заглавные, но немного меньшего размера)

Пример:
h1{font-variant:small-caps;}
h2{ font-variant:small-caps;}

Не рекомендуется пользоваться данным свойством, так как в некоторых браузерах текст может отображаться не корректно.

FONT-WEIGHT

Данное свойство определяет насыщенность шрифта, то есть менее или более жирным. Существуют стандартные значения такие, как normal (обычный) и bold (жирный), но некоторые браузеры могут поддерживать и числовые значения кратные 100.
К примеры normal равен 400, а bold равен 700.

Пример правильного написания:

Н1 {font-weight: 700;} – шрифт будет жирным
Н2{font-weight: 400;} – шрифт будет обычным
Н1 {font-weight: bold;} – шрифт будет жирным
Н2{font-weight: normal;} – шрифт будет обычным

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

FONT-SIZE

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

Пример:
h1 {font-size: 36px;} – этот шрифт будет 36 размера, то есть очень крупный.
h2{font-size: 18px;}- этот шрифт будет ровно в два раза меньше предыдущего.

FONT

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

Пример без сокращения:
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;}

Оба варианта на сайте будут выглядеть абсолютно одинаково.