Шрифт в 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}
На этом со шрифтами закончим и перейдем к свойствам текста.