Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

Шрифт в CSS. Простое использование.

Несколько свойств влияющих на шрифт в CSS и их использование.

- FONT-FAMILY
- FONT-STYLE
- FONT-VARIANT
- FONT-WEIGHT
- FONT-SIZE
- FONT

Теперь по порядку:

font-family

Семейство шрифта. Позволяет задавать тексту определённый шрифт. Например:

h1
{font-family: Verdana, Arial, sans-serif; }
p
{font-family: "Times New Roman", serif; }

Для заголовка <h1> будет применён шрифт Verdana, если его вдруг не окажется то будет использоваться шрифт Arial, и уж если нет шрифта Arial будет применён тип шрифтов sans-serif. Именно для этого пишут несколько значений шрифтов.
Для параграфов соответственно.
Обратите внимание, что название шрифта для параграфа взято в кавычки. Это делается для всех шрифтов имеющих в названии пробелы.
Также семейства шрифтов пишется с заглавной буквы - например Arial, а тип шрифта с прописной - например serif.
Теперь несколько примеров шрифтов:

Это пример шрифта Arial
Это пример шрифта Georgia
Это пример шрифта Tahoma
Это пример шрифта Verdana
Это пример шрифта "Times New Roman"

 


font-style

Задаёт стиль шрифта. Имеет три значения.
normal - обычный
italic - курсив
oblique - наклонный

h1
{font-family: Verdana, Arial, sans-serif;
font-style: italic; }


font-variant

Применяется для определения варианта написания строчных букв. Имеет два значения.
normal -  по умолчанию, без изменений
small-caps - строчные буквы пишутся как заглавные, только в уменьшенном виде.

h1
{font-family: Verdana, Arial, sans-serif; 
font-variant: small-caps; }


font-weight

Насыщенность шрифта. Два значения.
normal - обычный
bold - полужирный


font-size

Размер шрифта, задаётся в пикселях. Пример:

h1
{font-family: Arial, Verdana, sans-serif; 
font-size: 18px; }

Можно сделать совсем маленькие буквы или огромные.


font

Сокращённая запись всех вышеперечисленных свойств, как и background. 
Последовательность записи такая:

1 - FONT-STYLE
2 - FONT-VARIANT
3 - FONT-WEIGHT
4 - FONT-SIZE
5- FONT-FAMILY

Такую надпись:

p
{font-style: italic;
font-variant: small-caps ;
font-weight: bold;
font-size: 24px;
font-family: Arial, sans-serif; }

Можно заменить сокращённой записью:

p
{font : italic small-caps bold 24px Arial, sans-serif; } 


Если не указать какое нибудь значение, оно будет использовано по умолчанию. Все значения указываются через пробел!!!

Перейти к следующему уроку
CSS Списки

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!