Шрифты
Выбор подходящего шрифта для отдельных частей документа является одним из наиболее часто выполняемых действий в процессе разработки HTML-документа. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и по жирности отображения (нормальный, полужирный). Каскадные таблицы стилей предоставляют в распоряжение разработчика набор свойств для установки всех перечисленных параметров шрифтов. Кроме того, уровень 2 каскадных таблиц стилей позволяет загружать отсутствующие на компьютере читателя шрифты непосредственно с сервера, на котором расположен документ.
Свойство font-family
Свойство font-family задаёт приоритетный список семейств шрифтов и/или типовых семейств шрифтов. Если использовать для отображения один определённый шрифт, то может оказаться, что этот шрифт не поддерживает некоторые символы, содержащиеся а странице, или на компьютере пользователя нет вообще этого шрифта. Для разрешения подобных проблем это свойство позволяет разработчику страницы задать список шрифтов одного стиля и размера, среди которых браузер может искать необходимый символ. В отличии от других свойств каскадных таблиц стилей названия семейств в списке отделяются запятыми, чтобы показать их альтернативность.
BODY { font-family: TimesDL, "Times New", serif }
При интерпритации HTML-страницы браузер сначала ищет на компьютере пользователя шрифт TimesDL. Если такой шрифт отсутствует, то браузер пытается применить шрифт Times New, а если и он не найден, то используется любой шрифт из семейства шрифтов serif - одного из типовых семейств шрифтов компьютера.
Понятие типовых семейств шрифтов введено в каскадные таблицы стилей с целью реализации наихудшего варианта отображения страницы, если не найдены специально использованные автором шрифты. В любой реализации каскадных таблиц стилей должно существовать пять типовых семейств шрифтов, которые соответствуют реальным шрифтам, обычно устанавливаемым на большинстве компьютеров:
serif (например, Times)
sans-serif (например, Helvetica)
cursive (например, Zapf-Chancery)
fantasy (например, Western)
monospace (например, Courier)
Имена шрифтов, состоящие из нескольких слов, должны заключаться в кавычки.
Свойство font-style
Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный ( normal ), курсивный ( italic ) или наклонный ( oblique ).
Нормальный шрифт - это обычный прямой шрифт, используемый для печати докуметов. Курсивный стиль шрифта напоминает каллиграфические этюды в прописях первокласников и близок к рукописному. Наклонные шрифты генегируются из обычных прямых шрифтов небольшим наклоном символов.
Свойство font-variant
Каскадные таблицы стилей реализуют еще одну вариацию шрифта выбранного семейства - капитель ( small-caps ). В шрифте этого стиля все строчные буквы вышлядят как прописные, но меньшего размера и с немного измененными пропорциями.
Значения normal свойства font-variant не изменяет вида шрифта, а значение small-caps выбирает вариан капитель шрифта.
Свойство font-weight
Это свойство выбирает из заданного семейства шрифт определённой жирности. В рекомендациях регламентируется 9 градаций жирности шрифта, задаваемых числами 100, 200 и так далее до 900. Значение 100 соответствует самому "бледному" шрифту.
Для задания нормального шрифта используется ключевое слово normal , что соответствует цифровому значению 400. Значение bold применяется для выбора общепринятого полужирного начертания и его цифровым эквивалентом является 700.
Выбор определённой градации жирности шрифта не означает, что в семействе существует шрифт с заданной жирностью. Единственное, что гарантируется, - это то, что шрифт с большим значением жирности не светлее предыдущего значения. Некоторые семейства имеют только две градации жирности: нормальную и полужирную.
Свойство font-size
Это свойство определяет размер шрифта. Его значение может быть абсолютным или относительным.
Абсолютное значение можно задать одним из следующих ключевых слов: xx-small , x-small , small , medium , large , x-large , xx-large , которые являются индексами в таблице размеров шрифтов, поддерживаемой браузером. Масштабирующий множитель соседних значений в уровне CSS1 определяется как 1.5, а в уровне CSS2 его значение рекомендовано равным 1.2. Это означает, что шрифт размера large в 1.2 раза выше шрифтов medium и в 1.2 ниже шрифта x-large . По умолчанию браузер использует значение medium .
Абсолютное значение можно задать и в виде абсолютного значения длины, например 10pt, но в этом случае высота шрифта не зависит от хранимой таблицы размеров шрифтов браузера.
Ключевые слова для задания относительного размера шрифта интерпритируются относительно таблицы размеров шрифтов и размера шрифта элемента-родителя. Возможными значениями могут быть: larger и smaller . Например, если родител имеет размер шрифта medium , то значение larger сделает шрифт текущего элемента равным large .
Относительный размер шрифта можно задать также в процентах к размеру шрифта родителя или в относительных единицах длины:
P { font-size: 10pt }
EM { font-size: 120% }
EM { font-size: 1.2em }
Два последние правила для выделенного в абзаце элемента EM определяют одинаковую высоту шрифта 12pt.
Свойство font
Основное значение свойства font - установить в одном определении значения свойств font-style , font-variant , font-weight , font-size , font-height и font-family . Все значения перечисленных свойств задаются через пробелы в том порядке, как они перечеслины выше. Первые три свойства могут не задаваться, что соответствует установке их значений в normal . Размер шрифта и высота строки (свойство line-height ) задаются через косую черту. Элементы списка семейств шрифтов свойства font-family задаются через запятую:
P { font: oblique 12pt/14pt "Times Cyr", serif }
В этом примере для абзаца задаётся наклонный шрифт Times Cyr высотой 12 пунктов. Высота строк - 14 пунктов. Если не найден шрифт Times Cyr, то применяется любой шрифт типового семейства serif .
Свойство @font-face
Это свойство введено в каскадные таблицы стилей в рекомендациях уровня 2. Оно применяется для задания семейства шрифта. Если указанный шрифт отсутствует на компьютере пользователя, то он загружается из сети по заданному вторым параметром URL-адресу:
@font-face { font-family: CoolFont;
scr:url(http://myserver.com/CoolFont.ect); }
Примечание
Все свойства шрифтов являются наследуемыми и применяются ко всем элементам документа HTML.