Форматирование текста

                Первое, что вы можете сделать для достижения большей

привлекательности сайта, — применить различные шрифты

к заголовкам, абзацам и другим элементам. Для выбора начертания

в CSS-стиле применяется свойство font-family и указывается тот

шрифт, который вы хотите использовать. Предположим, например,

что вы хотите применить для абзацев страницы шрифт Arial. Для

этого можно создать стиль тега p и воспользоваться свойством

font-family:

p {

font-family: Arial;

}

         Изначально свойство font-family работает, только если у

посетителей сайтов имеется такой же шрифт, установленный на их

компьютерах. Иначе говоря, применительно к показанному выше

примеру, если у кого-то из посетителей вашего сайта не будет на его

компьютере шрифта Arial, абзацы страницы будут отображены с

использованием исходного шрифта веб-браузера (обычно это

какой-нибудь вариант Times New Roman). Поэтому веб-дизайнеры

ограничивались небольшим набором шрифтов, поступающих

предустановленными на большинстве компьютеров.

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

веб-шрифты, то есть такие шрифты, которые браузер загружает

и использует при просмотре сайта. Веб-шрифты также применяют

свойство font-family, но требуют дополнительной CSS-команды,

которая называется директивой @font-face и которая выдает

веб-браузеру инструкцию загрузить указанный шрифт. Веб-шрифты

открывают многие захватывающие возможности в области дизайна,

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

             Но вскоре вы увидите, что данный подход также имеет проблемы.

Как веб-дизайнер вы можете остановиться на выборе проверенных

и реально существующих шрифтов, то есть указать шрифты из

основного набора, установленного на большинстве компьютеров,

или же задать веб-шрифты, расширив свой дизайнерский кругозор

(ценой дополнительной работы). Но вы не ограничены только одним

из этих подходов. Многие дизайнеры используют их в сочетании,

в одних случаях применяя стандартные шрифты (например, для

основной части текста страницы), а в других — веб-шрифты

(допустим, для создания привлекательных заголовков).

                 Когда для указания шрифта применяется свойство font-family,

посетители не обязательно должны увидеть выбранный вами шрифт,

у них он либо должен быть уже установлен на компьютере, либо в

случае указания веб-шрифтов временно загружен для просмотра сайта.

Поскольку вы не можете знать, доступен ли предпочитаемый вами

шрифт конкретному пользователю, сложилась практика указывать

не только основной шрифт, но и пару резервных вариантов. Если на

компьютере посетителя сайта есть шрифт, выбранный первым, он

и будет виден. Но если первый шрифт не установлен, браузер

просматривает список, пока не найдет указанный в нем шрифт. Идея

состоит в том, чтобы определить список однотипных шрифтов,

присутствующих в большинстве операционных систем. Например:

font-family: Arial, Helvetica, sans-serif;

           В данном примере браузер сначала выяснит, установлен ли Arial.

Если да, то он использует этот шрифт. В противном случае он ищет

Helvetica и, если и тот не установлен, применяется последний из

списка — универсальный гротесковый шрифт семейства sans-serif.

Когда вы вносите в список универсальный тип шрифта

(sans-serif или serif), браузер выбирает реально существующий

из этого семейства. По крайней мере, таким образом вы можете

определить его основные начертания.

            На практике для применения определенного CSS-свойства вы

должны добавить все остальные обязательные детали блока

описания стиля и таблицы (см. гл. 2). Например, p { font-family:

Arial , Helvetica, sans-serif; }. Если есть такие примеры определений,

помните, что это всего лишь отдельное свойство CSS-стиля для

сокращения и упрощения написания книги и удобства чтения.

Если название шрифта состоит из нескольких слов, вам следует

заключать его в кавычки:

font-family: "Times New Roman", Times, serif;

               Далее представлены некоторые часто используемые

сочетания обычно установленных шрифтов, сгруппированные по

типу шрифта.

Шрифты с засечками (Serif). Шрифты с засечками (маленькими

росчерками на концах основных штрихов) идеальны для больших

частей текста. Распространено мнение, что засечки визуально

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

Примерами шрифтов с засечками являются Times, Times New Roman,

Georgia.

Шрифты без засечек. Шрифты без засечек часто используются

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

Примеры шрифтов без засечек — Arial, Helvetica и Verdana.

Моноширинные шрифты. Моноширинный шрифт часто используется

для отображения компьютерного кода (например, фрагментов кода

повсюду в этой книге). Каждая буква в моноширинном шрифте

имеет одинаковую ширину (как буквы в механических печатных машинках).

С примерами этих шрифтов можете ознакомиться на рис. 6.4.

Courier — самый распространенный моноширинный шрифт, но

ограничиваться только им не обязательно. Lucida Console очень

популярен в Windows и Macintosh, а Monaco установлен на каждом

компьютере Macintosh.

Украшение текста

         CSS предлагает также свойство text-decoration для улучшения

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

элементов. С его помощью можно добавить линии подчеркивания,

надчеркивания, перечеркнуть текст (рис. 6.12) или сделать его

мигающим. Свойство text-decoration применяется в сочетании со

следующими ключевыми словами: underline, overline, line-through

или blink. Например, чтобы подчеркнуть фрагмент, наберите код:

text-decoration: underline;