Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Параметры шрифта

Параметры шрифта

Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах — всему голова.

Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:

font-family: <список имен шрифтов, разделенных запятыми>|inherit

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

P { font-family: Arial }

H1 (font-family: "Times New Roman" }

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

<P>

Если указанный нами шрифт присутствует на компьютере посетителя, Web- обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно, будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Win- dows.) Можно указать несколько наименований шрифтов через запятую:

P { font-family: Verdana, Arial }

Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, потом третий и т. д. Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов, представляющих целые наборы аналогичных шрифтов. Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):

H2 { font-family: Verdana, Arial, sans-serif }

Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы "наследует" шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию. Атрибут стиля font-size определяет размер шрифта:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).

Таблица 8.1. Единицы измерения размера, поддерживаемые стандартом CSS

Обозначение выбранной единицы измерения указывают после самого значения:

P { font-size: 10pt } STRONG { font-size: 1cm } EM { font-size: 150 % }

Отметим, что все приведенные в табл. 8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.

Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.

Атрибут стиля color задает цвет текста:

color: <цвет>|inherit

В главе 7 мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате

#<доля красного цвета><доля зеленого цвета><доля синего цвета>,

где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF. Зададим для текста красный цвет:

H1 { color: #FF0000 } А теперь серый цвет: ADDRESS { color: #CCCCCC }

Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.

Пример:

H1 { color: red }

Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.

Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля font- size по умолчанию.

С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.

Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:

opacity: <числовое значение>|inherit

Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).

Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:

PRE { opacity: 0.5 }

Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.

Атрибут стиля font-weight устанавливает "жирность" шрифта:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit

Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную "жирность" шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь "жирность" 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени "жирности" соответственно в б?льшую и меньшую сторону.

Пример:

CODE { font-weight: bold }

Атрибут font-style задает начертание шрифта:

font-style: normal|italic|oblique|inherit

Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).

Атрибут стиля text-decoration задает "украшение" (подчеркивание или зачеркивание), которое будет применено к тексту:

text-decoration: none|underline|overline|line-through|blink|inherit

Здесь доступны пять значений (не считая inherit):

— none убирает все "украшения", заданные для шрифта родительского элемента;

— underline подчеркивает текст;

— overline "надчеркивает" текст, т. е. проводит линию над строками;

— line-through зачеркивает текст;

— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).

Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:

font-variant: normal|small-caps|inherit

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

Атрибут стиля text-transform позволяет изменить регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none|inherit

Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).

Атрибут стиля line-height задает высоту строки текста:

line-height: normal|<расстояние>|inherit

Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:

P { line-height: 2 }

Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.

Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:

letter-spacing: normal|<расстояние>

Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.

Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см. табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.

Атрибут стиля letter-spacing не поддерживает значение inherit.

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

H1 { letter-spacing: 5px }

Текст, набранный такими символами, будет выглядеть разреженным.

А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:

H6 { letter-spacing: -2px }

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

Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:

word-spacing: normal|<расстояние>

Пример:

H1 { word-spacing: 5mm }

Ну, 5 мм, пожалуй, многовато… Хотя это всего лишь пример.

И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:

font: [<начертание>] [<вид строчных букв>] [<"жирность">] [<размер>[/<высота строки текста>]] <имя шрифта>

Как видим, обязательным является только имя шрифта — остальные параметры могут отсутствовать.

Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:

P { font: 10pt "Times New Roman" }

А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:

H6 { font: italic 12pt Verdana }

Оглавление книги