Шрифты CSS

В этой главе:

  • Семейства шрифтов в CSS

  • Стиль шрифта

  • Размер шрифта

  • "Безопасные" (стандартные) Web-шрифты

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

Разница между семействами шрифтов Sans-serif и Serif

шрифт sans-serif

Семейства шрифтов в CSS

В CSS шрифты разделены на семейства, каждое семейство состоит из набора шрифтов, обладающих общими характеристиками. Существует всего пять семейств шрифтов:

  • sans-serif - шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.

  • serif - семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки - декоративные штрихи и черточки по краям букв.

  • monospace - семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.

  • cursive - шрифты, имитирующие рукописный текст.

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

Свойство font-family дает возможность изменить шрифт, заданный по умолчанию. Обычно оно содержит список взаимозаменяемых шрифтов, разделенных запятыми, принадлежащих одному семейству. Если имя шрифта состоит более чем из одного слова, то его нужно указывать в кавычках. В конце списка обычно указывается название семейства:

1
2
3
body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

  1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)

  2. Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.

  3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.

  4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exserif { font-family: "Times New Roman", Times, serif; }
      p.exsansserif { font-family: Arial, Helvetica, sans-serif; }
    </style>
  </head>
 
  <body>
    <h1>CSS свойство font-family</h1>
    <p class="exserif">Абзац использующий шрифт Times New Roman.</p>
    <p class="exsansserif">Абзац использующий шрифт Arial.</p>
  </body>
</html>

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

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

  • normal - стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное

  • italic - курсивное начертание

  • oblique - наклонное начертание

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>
 
  <body>
    <p class="exnormal">Абзац со значением normal.</p>
    <p class="exitalic">Абзац со значением italic.</p>
    <p class="exoblique">Абзац со значением oblique.</p>
  </body>
</html>

Курсивные шрифты традиционно были стилизованными версиями шрифта, основанными на каллиграфии, в то время как наклонное начертание создавалось простым добавлением небольшого наклона символам. Большинство шрифтов не содержат набор курсивных символов, поэтому браузер зачастую использует алгоритм наклона для символов текста. Это означает, что во многих случаях вы не увидите разницы между значениями italic и oblique.

Размер шрифта

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

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

1
body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% - 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то рамер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

1
body { font-size: 100%; }

EM

Единица измерения em позволяет изменить размер шрифта относительно размера шрифта в родительском элементе. Посколько по умолчанию размер шрифта в браузерах состовляет 16px, то можно использовать правила, аналогичные тем, которые используются для значений в процентах.

1
2
body { font-size: 14px; }
h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> - 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет состовлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

1
p { font-size: small; }

Среднее значение medium - размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего.

Попробуйте сами:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>
 
  <body>
    <p class="class1">Изменение размера с помощью процентов.</p>
    <p class="class2">Изменение размера с помощью пикселей.</p>
    <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

"Безопасные" (стандартные) Web-шрифты

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

Основой для определения "безопасных" шрифтов послужили шрифты наиболее распространённой операционной системы - Windows, которые кроме того используются в других ОС:

Шрифты с засечками - serif

font-family

Пример

Georgia, serif

Это заголовок

Это абзац

"Palatino Linotype", "Book Antiqua", Palatino, serif

Это заголовок

Это абзац

"Times New Roman", Times, serif

Это заголовок

Это абзац

Шрифты без засечек - Sans-Serif

font-family

Пример

Arial, Helvetica, sans-serif

Это заголовок

Это абзац

"Arial Black", Gadget, sans-serif

Это заголовок

Это абзац

"Comic Sans MS", cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

"Lucida Sans Unicode", "Lucida Grande", sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

"Trebuchet MS", Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты - Monospace

font-family

Пример

"Courier New", Courier, monospace

Это заголовок

Это абзац

"Lucida Console", Monaco, monospace

Это заголовок

Это абзац