В первой части статьи читатели смогли ознакомиться с основами каскадных таблиц стилей (CSS). Были проанализированы базовые понятия и термины спецификации CSS, а также методы назначения собственных стилевых решений как совокупности HTML-документов, так и отдельным тегам или элементам Web-страниц. Нетрудно заметить, что большинство приводившихся примеров так или иначе касалось назначения стилей для шрифтов.
В настоящей статье подробно рассмотрим возможности работы со шрифтами, параметры, характеризующие тот или иной стиль, а также некоторые базовые понятия CSS. По-прежнему все разъяснения будут сопровождаться примерами.
Свойства шрифтов
Разрабатывая методы обращения со шрифтами, создатели спецификаций CSS преследовали две цели. Первая - дать возможность авторам Web-станиц придавать текстам вид, соответствующий типографским традициям разных стран, а также авторским замыслам оформления Web-страницы. Вторая цель - позволить все это делать как можно проще. При этом страница, будучи отображенной в окне браузера пользователя, хотя бы отдаленно должна напоминать то, что собирался показать автор.
Во многом замыслы авторов Web-страниц ограничивались либо слабыми, либо не всегда удобными инструментами работы со шрифтами, предлагаемыми спецификациями языка HTML. Так как прямое назначение шрифта согласно его наименованию зачастую невозможно, предлагается назначать шрифт на основе набора его характеристик. Рассмотрим их.
Шрифтовые семейства и семейства шрифтов
Собственно шрифтовое семейство (font family) - это группа шрифтов, объединяющая шрифты различных способов начертания (курсив, полужирное начертание). Указывая на определенный шрифт, создатель Web-страницы предполагает наличие такового у пользователя. В известной степени это оправданно, так как некоторые распространенные шрифты (Arial, Helvetica) входят в поставку наиболее известных операционных систем и имеются на большинстве компьютеров. Но если, паче чаяния, таких шрифтов не окажется, можно указать общее семейство шрифтов (generic family), объединяющее шрифты с одинаковым типом начертания. В таблице приведены описания семейств русских шрифтов, рекомендованных авторами CSS (кодировка koi8-r).
Синтаксис описания семейства шрифтов уже знаком по примерам из первой части статьи:
{font-family: имя_шрифта1, имя_шрифта2, семейство_шрифтов}
После того как основные различия шрифтов и синтаксис их назначения прояснены, рассмотрим пример:
<head>
<style type="text/css">
<!-
font {font-family: Helvetica,
Arial, sans-serif}
->
</style>
</head>
<font size="10">
Пример бессерифного шрифта.
</font>
Здесь, назначая бессерифный шрифт для текста страницы, мы явным образом указали два шрифта Helvetica и Arial. Браузер пользователя при отображении данной страницы будет пытаться воспользоваться именно этими шрифтами, а не обнаружив их на компьютере пользователя, подставит любой другой шрифт, относящийся к семейству sans-serif.
Следует обратить внимание и на то, что название шрифта, состоящее из двух слов, такое как Arial Cyr, следует брать в кавычки или апострофы, в зависимости от того, где вписывается название шрифта:
P {font-family: "Arial Cyr"}
или
<FONT STYLE="font-family: 'Comic Sans'">.
Размеры шрифтов
В CSS предусматриваются четыре метода задания размера шрифта - абсолютный, относительный, явное указание величины шрифта и процентный. Синтаксис указания размера шрифта нам уже знаком:
{font-size:размер_шрифта}
Абсолютный размер. Задавая абсолютную величину шрифта, необходимо указать один из семи базовых размеров. Размеры эти таковы (от большего к меньшему):
* xx-large
* x-large
* large
* medium
* small
* x-small
* xx-small
Используя эти величины согласно синтаксису, получим конструкцию
{font-size:xx-large}
применение которой видно на следующем примере:
<html>
<head>
<title>Рисунок 5.2</title>
</head>
<body>
<P STYLE="font-size:xx-large"> Размер xx-large</P>
<P STYLE="font-size:x-large"> Размер x-large</P>
<P STYLE="font-size:large"> Размер large</P>
<P STYLE="font-size:medium"> Размер medium</P>
<P STYLE="font-size:small"> Размер small</P>
<P STYLE="font-size:x-small"> Размер x-small</P>
<P STYLE="font-size:xx-small"> Размер xx-small</P>
</body>
</html>
Относительный размер. При относительном методе задания размера шрифта можно оперировать двумя параметрами - larger и smaller. В этом случае новый размер шрифта будет соответственно больше или меньше исходного на один шаг, равный базовому размеру шрифта при его абсолютном указании. Например, если текущий размер шрифта medium, то по команде
{font-size: large},
его размер станет large, точно так же, как это сделано в примере:
<html>
<head>
<title>Рисунок 5.3</title>
<style type="text/css">
font.size {font-size:medium}
font.size1 {font-size:larger}
</style>
</head>
<body>
<br><font class="size"> Размер medium</font>
<br><font class="size1"> А это larger</font>
</body>
</html>
Явное указание размера. Наверное, самым простым методом указания размера шрифта является указание его величины в привычных единицах измерения. В качестве таковых применяются пикселы (px), дюймы (in), сантиметры (cm), миллиметры (mm), а также типографские единицы измерения - пики (pc) и пункты (pt), т. е. 1/12 пики.
<html>
<head>
<title>Рисунок 5.4</title>
</head>
<body>
<P STYLE="font-size:0.5 in"> Размер в дюймах</P>
<P STYLE="font-size:0.7 cm"> Размер в сантиметрах</P>
<P STYLE="font-size:5 mm"> Размер в миллиметрах</P>
<P STYLE="font-size:12 pt"> Размер в пунктах</P>
<P STYLE="font-size:2 pc"> Размер в пиках</P>
</body>
</html>
Указание размера в процентах. Этот метод задания размера тоже можно отнести к относительным. В данном случае новый размер указывается в процентах от размера шрифта, установленного в браузере, как размер шрифта по умолчанию.
Пример:
{font-size:50%}
Ширина символов
Под шириной символов понимаются два стандартных значения - normal и bold. Поэтому используя синтаксис
{font-weight: ширина_символа},
получим либо
{font-weight: normal},
либо
{font-weight: bold}.
При необходимости можно изменить ширину символов какой-либо части текста относительно другой части текста, ширина символов которой остается неизменной. Для этого применяются следующие значения свойства font-weight:
bolder - для выделения текста жирным шрифтом, как это сделано в примере:
Напечатано
<font style="font-weight:bolder">жирным</font>
шрифтом.
lighter - если надо сделать выделяемый текст тоньше:
<B>Напечатано
<font style="font-weight:lighter">
нормальным</font> шрифтом.</B>
Для лучшего понимания приведем пример с использованием всех четырех способов задания ширины шрифта:
<html>
<head>
<title>Рисунок 5.5</title>
</head>
<body>
<font style="font-weight:bold">Напечатано жирным шрифтом.</font><br>
<font style="font-weight:normal">Напечатано нормальным шрифтом.</font>
<br>
Напечатано
<font style="font-weight:bolder">жирным</font>
шрифтом.<br>
<B>Напечатано
<font style="font-weight:lighter">
нормальным</font> шрифтом.</B>
<br>
</body>
</html>
Задание ширины символов с помощью численного ряда. Указанный метод задания ширины символа не является универсальным, поскольку нет единого стандартного значения для таких параметров, как normal или bold. Эти параметры призваны определять ширину символа прежде всего для шрифтов - членов одного шрифтового семейства: какой-то из них тоньше относительно другого, какой-то толще. Например, жирный шрифт Arial Bold шире нормального Arial, но это не значит, что он шире какого-то другого нежирного шрифта, даже если тот относится к семейству бессерифных шрифтов. Прямое указание шрифта невозможно, поэтому предусмотрена возможность задания ширины символов путем присваивания им значения из числового ряда от 100 до 900 - 100, 200, 300, 400, 500, 600, 700, 800, 900. Причем значение 400 соответствует нормальной ширине символов шрифта, а 700 - жирной. Назначается числовое значение точно в соответствии с приведенным выше синтаксисом, например:
{font-weight: 700}.
Начертание шрифта
На практике используют два стиля начертания того или иного шрифта - нормальный и наклонный. Синтаксис задания стиля начертания:
{font-style:начертание_шрифта}
Для задания нормального стиля начертания свойство font-style приобретает значение normal:
{font-style:normal}.
Для задания наклонного стиля - italic:
{font-style:italic}.
Для некоторых шрифтов наклонное начертание задается значением oblique. В CSS как первой, так и второй версии этот случай учтен и значение oblique применяется наравне с указанными выше значениями.
Вариант шрифта
Создателям Web-страниц предлагаются два варианта шрифтов записываемые в соответствии с синтаксисом
{font-variant: вариант_шрифта}.
Это - normal и small-caps. Первый вариант предусматривает привычное, нормальное начертание букв, а второй используется для написания текста прописными буквами, но меньшего, чем предусмотрено для данного шрифта в нормальном значении размера. Если какой-то шрифт для отображения текстов в этом варианте не указан специально, то берется шрифт, указанный как шрифт по умолчанию, причем соответствующий текст отображается прописными буквами, но меньшим кеглем. Если по каким-то причинам это сделать невозможно, например, если выбранный шрифт предполагает только один размер символов, то текст отображается просто прописными буквами. Пример:
<html>
<head>
<title>Рисунок 5.6</title>
</head>
<body>
Текст в варианте Normal и
<font style="font-variant:small-caps">
Текст в варианте Small-caps</font>
</body>
</html>
Сокращенная запись
В некоторых случаях, когда при назначении стиля указывается сразу несколько значений разных параметров, разумно прибегать к сокращенной записи. При этом значения normal считаются принятыми по умолчанию и не указываются. Таким образом, запись
H1 {font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal;}
преобразуется в запись
H1 {font: bold 12pt/14pt Helvetica}.