Шрифт в CSS

Управление шрифтами в CSS не сильно отличается от HTML, однако использование CSS дает свои преимущества. Во-первых пользоваться CSS намного удобнее, а во-вторых правила CSS для текстовых блоков гораздо экономят объем HTML — страницы. Для задания параметров шрифтов в HTML используется элемент FONT, с помощью которого задается гарнитура шрифта, размер и цвет. В CSS эти параметры задаются при помощи свойств.

Содержание:

• Свойство FONT-FAMILY
• Свойство FONT-STYLE
• Свойство FONT-VARIANT
• Свойство FONT-WEIGHT
• Свойство FONT-SIZE
• Свойство FONT

Свойство FONT-FAMILY

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

• serif — шрифты с засечками, например: Times New Roman;
• sans-serif — шрифты рубленые, без засечек, например: Arial, Verdana, Tahoma;
• monospace — моноширинные шрифты, с одинаковым расстоянием между символами, например: Courier New;
• cursive — шрифты курсивные, например: Calisto MT;
• fantasy — декоративные шрифты.

Значением свойства FONT-FAMILY является название семейства шрифтов, посмотрим на примере:

p {font-family: Verdana, sans-serif}

В данном случае текст внутри абзацев будет выполнен шрифтом Verdana, а если такого шрифта на компьютере посетителя твоей страницы не окажется, то будет использоваться любой шрифт семейства SANS-SERIF.

Свойство FONT-STYLE

Это свойство задает стиль шрифта при помощи некоторых значений:

• normal — обычный;
• oblique — наклонный;
• italic — курсивный.

Смотрим пример написания стиля:

p {font-family: Verdana, sans-serif}
p.cursiv {font-style: italic}

Абзац обозначенный на странице классом class=»cursiv» будет отличаться от остальных курсивным начертанием. Так же при помощи свойства FONT-STYLE можно изменить начертание шрифта для элементов HTML.

em {font-style: normal; color: green}

Теперь слова выделенные тегами < em >, вместо курсива будут выделены зеленым цветом.

Свойство FONT-VARIANT

С помощью этого свойства можно задать вариант написания букв. Вариантов всего два:

• normal — обычный;
• small-caps — малые прописные буквы.

h1, h2, h3, h4, h5, h6 {font-variant: small-caps}

Все заголовки документа будут выводиться малыми прописными буквами.

Свойство FONT-WEIGHT

Это свойство отвечает за насыщенность шрифта, значениями являются числа 100, 200, 300, 400, и т.д до 900. Обычному шрифту соответствует значение — 400, полужирному — 700. Лично я этим свойством никогда не пользовался, да и браузеры поддерживают не все девять возможных значений.

Свойство FONT-SIZE

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

• ключевыми словами, причем реальный размер шрифта будет зависеть от браузера и операционной системы (сам не использую), всего их семь:
  • xx-small;
  • x-small;
  • small;
  • medium;
  • large;
  • x-large;
  • xx-large;
• процентами (%);
• любыми единицами длины (рекомендую) — этот способ универсален, так как размер шрифта отображается одинаково в любом браузере, пишутся стили так (первый задан в пикселах, второй в пунктах):

p {font-size: 12px}

p {font-size: 10pt}

Свойство FONT

При использовании стенографического свойства font можно коротко записать все свойства шрифта. Смотрим пример:

p {
font-family: Verdana, sans-serif;
font-style: normal;
font-variant: small-caps;
font-size: 12px
}

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

p {font: normal small-caps 12px Verdana, sans-serif}

На этом со шрифтами закончим и перейдем к свойствам текста.