HTML и CSS для новичков (Часть 45): Стильные шрифты для страницы

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

body {
   font-family: Arial, Helvetica, sans-serif;
}

Здесь шрифту Arial присваивается элементу body. Если его нет на компьютере у пользователя, используется Helvetica. Если даже Helvetica отсутствует, браузеру приказывается использовать шрифт без засечек. Однако на это, конечно, нельзя полностью контролировать. В итоге у вас не будет реального контроля над результатом. То, что было красиво создано в GIMP или Photoshop, может исчезнуть в джунглях шрифтов. О том, как решить эту проблему, мы расскажем позже.

Теперь вернемся к классическому способу. Ниже приведено типичное определение, которое настраивает базовый внешний вид веб-страницы. С помощью определения для body вы можете первоначально установить основные параметры шрифтов.

body {
   font-family: Georgia, Times, "Times New Roman", serif;
   color: #000;
   font-size: 1.1em;
   line-height: 150%;
}
p {
   font-size: 1.1em;
}

Конечно, вы также можете отдельно стилизовать отдельные элементы на странице. К ним относятся, например, заголовки, курсивные фрагменты и т. д. Однако помните в этом контексте о принципе наследования в CSS.

h1 {
   font-size: 1.6em;
}

Результат в браузере может выглядеть следующим образом:

Использование веб-шрифтов

Проблема с обычными определениями шрифтов налицо: в конечном счете вы не можете быть уверены, что указанный вами шрифт действительно доступен у зрителя. Браузеры, если не найдут шрифт, в случае сомнения выберут похожий на тот, который вы хотели. Таким образом, у вас фактически нет контроля над результатом. Вот где и приходит на помощь @font-face. С его помощью можно явно указать, какой шрифт должен использоваться. Это работает так же, как с изображениями. Необходимо указать путь к файлу шрифта.

В современных браузерах для @font-face используются так называемые WOFF-веб-шрифты. Эти шрифты заметно меньше по размеру, чем раньше используемые форматы веб-шрифтов EOT и TTF.

Типичное определение @font-face выглядит следующим образом:

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Название используемого шрифта записывается в font-family. До этого ничего особенного по синтаксису. Через src:url() указывается URL, по которому находится файл веб-шрифта. Если есть вероятность, что шрифт доступен на компьютерах пользователей, желательно также указать local. В local указывается название шрифта.

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   local: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

После определения @font-face веб-шрифты можно использовать так же, как обычные шрифты.

h1 {
   font-family: "Bitstream Vera Serif Bold";
   font-size: 1.2em;
   color: #3399FF;
}

Здесь, например, есть веб-шрифты

Теперь, конечно, встает вопрос, откуда брать файлы соответствующих веб-шрифтов. Например, Google хостит множество этих веб-шрифтов на странице http://www.google.com/fonts.

Эти шрифты можно встраивать прямо через указанную страницу.





Соответствующий вызов выглядит так:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

В font-family указывается желаемый веб-шрифт. На указанной странице Google вы найдете эти имена и вызовы. После встраивания веб-шрифта его можно использовать как любой другой шрифт.

body {
   font-family: 'Tangerine', serif;
   font-size: 1.2em;
}

Кто хочет, может использовать несколько веб-шрифтов на своей странице. Для этого нужно нажать на странице http://www.google.com/fonts на нужные веб-шрифты и выбрать Add to Collection. Когда все веб-шрифты находятся в собственной коллекции, перейдите в нижнюю часть страницы и выберите Use. Там напротив сразу отображается какой-то вид тахометра.





По этой иллюстрации можно увидеть влияние встраивания веб-шрифтов на время загрузки страницы. Эти последствия действительно измеримы и увеличиваются с каждым добавленным веб-шрифтом.

Как легко использовать несколько веб-шрифтов, которые были добавлены в вашу коллекцию, показывает следующий пример:

<link href="http://fonts.googleapis.com/css?
family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">

Отдельные веб-шрифты перечисляются через вертикальную черту. Полный вызов, соответствующий выбранной коллекции, отображается на уже упомянутой странице использования.

Многие веб-шрифты предоставляют так называемые подмножества, такие как Латиница или Кириллица. Чтобы явно включить их, укажите желаемое подмножество в качестве значения параметра.

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Если нужно использовать несколько из этих подмножеств, их следует перечислить через запятую.

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Однако использование этих веб-шрифтов вызывает определенные споры по совершенно иному вопросу. Во-первых, при загрузке страницы необходимо установить соединение с сервером Google. Это можно обойти, скачав файл веб-шрифта и загрузив его на собственный сервер. Однако в любом случае обязательно учитывайте условия использования веб-шрифтов, которые вы хотите использовать таким образом.

Определение шрифта для примера страницы

Ниже приведены определения шрифтов, которые я буду использовать для текущего примера страницы:

body {
   font-family: 'Crimson Text', Helvetica, sans-serif;
   color: #444;
   text-decoration: none;
   line-height: 1.5em;
   font-size: 1.2em;
}
p { 
   font-size: 1.1em;
}
h1 {
   font-size: 1.6em;
   color: #3399FF;
}

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