ВЕБУЧЕБНИКИ

УРОК 6 - ШРИФТЫ В CSS

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

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

Так вот за шрифты в CSS отвечают следующие свойства:

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font
  

Свойство FONT-FAMILY

Данное свойство определяет гарнитуру шрифта. Вообще FONT-FAMILY с англ. означает семейство шрифта. Дело в том, что шрифты по тем или иным признакам, объединяются в семейства. Рассмотрим три основных семейства:

 

Свойство font-family должно содержать несколько имен шрифтов в качестве "запасных" вариантов. Если браузер не поддерживает первый шрифт, он пробует применить следующий шрифт.

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

Замечание: Если в имени семейства шрифта более одного слова, оно должно заключаться в кавычки, например семейство шрифтов "Times New Roman".

Более одного семейства шрифтов указывается через запятую:

Пример:

p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

нажмите чтобы увидеть результат

Свойство FONT-STYLE

Свойство font-style в основном используется, чтобы указать курсивный текст.

Это свойство имеет три значения:

normal - обычный текст

italic - курсивный текст

oblique - наклонный текст (наклонный (oblique) текст очень похож на курсивный, но меньше поддерживается).

Пример:

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {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

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

Пример:

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; }

Еще раз обратите внимание, на то, что все значения указаны в нужной последовательности, и ЧЕРЕЗ ПРОБЕЛ. Если какое-либо свойство не указать, ему присвоится значение по умолчанию.