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

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

Атрибуты шрифта:

Font-family – основной атрибут шрифта, задающий его форму. Для определения значения этого атрибута имеются две возможности: указать название шрифта, например Verdana или Times New Roman, либо же воспользоваться заранее заданными названиями шрифтовых семейств и системных шрифтов (типами).

Типы шрифтов:

• serif ("антиква" - шрифты с засечками) – пропорциональные шрифты, литеры которых оканчиваются горизонтальными черточками (серифами), например: Georgia, Times New Roman, Century Schoolbook;
• sans-serif ("гротеск" - гротескные шрифты без засечек) – пропорциональные шрифты с прямыми концами литер, например: Arial, Helvetica, Verdana, Tahoma, "Trebuchet MS";
• monospace (моноширинные шрифты для отображения программного кода) – шрифты с постоянной шириной знаков, например: Courier New, Prestige;
• cursive - рукописные шрифты, например: ZapfChancery;
• symbol - шрифты для определённых символов, например: ZapfDingbats;
• fantasy – декоративные шрифты, например: ComicSans;
• other - все остальные шрифты, например: техногенные, гранжевые, готические и т.п.

Значение параметра font-family может принимать вид списка, элементы которого разделены запятыми. В этот список включают названия шрифтов и обязательно тип шрифта.

Это необходимо, так как, если на компьютере клиента отсутствует, скажем, шрифт "Trebuchet MS", а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указан тип шрифта, браузер будет подтавлять шрифт из этого семейства которое присутствует на машине клиента (например если будет указан тип sans-serif то вместо "Trebuchet MS" будет подставлен шрифт Arial, Verdana и т.д., а не "Times New Roman").

Названия шрифтовых семейств являются ключевыми словами и их приводят без кавычек, в отличие от названий собственно шрифтов (особенно тех, которые состоят из нескольких слов).

Не стоит забывать, что названия шрифтов, содержащих пробелы, следует включать в кавычки.

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

Некоторые особенности использования шрифтов.

Пример:

font-family: Verdana, sans-serif;
font-family: Georgia, serif;
font-family: Courier New, monospaced;

В Windows всё отобразится абсолютно верно, поскольку будут найдены и использованы указанные в стиле шрифты. А вот в других ОС в том случае, если этих шрифтов нет, будут использованы те гарнитуры, которые прописаны по умолчанию в настройках браузера.

Этой ситуации можно избежать. Просто нужно прописать гарнитуры тех шрифтов, которые есть и в Linux, и в MacOS. Но их может не быть в Windows (В MacOS X и Linux многие шрифты совпадают: Helvetica, Courier, Times, Palatino. Немного может различаться характер рисунка данных шрифтов, но в целом они довольно схожи). И тогда запись будет выглядеть следующим образом:

font-family:
 (шрифт без засечек, например "Trebuchet MS"), Arial, Helvetica, sans-serif;
font-family:
 (какой нибудь шрифт с засечками), "Times New Roman", Times, serif;
font-family:
 (моноширинный шрифт), "Courier New", Courier, monospaced;

Знакомая запись, не правда ли?

Вот еще пример:

• font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;

Заметьте, насколько нелогично идёт чередование шрифтов в указании: наиболее распространённый Arial предшествует Verdana и Tahoma, которые практически всегда если и есть в системе, то лишь вместе. То есть Tahoma не будет использован никогда, да и у Verdana нет ни малейшего шанса: всех со стопроцентной вероятностью обставит Arial. Тогда зачем было городить такую нелепую конструкцию? Это издержки бездумного «копипаста».

Свойства шрифта

• font-style – параметр описания стиля шрифта. Font-style принимает значения italic (наклонный шрифт или курсив), oblique (простой наклонный шрифт), normal (вид по умолчанию);
• font-variant – вариант шрифта. Параметр принимает значения small-caps (малые прописные) и normal;
• font-weight – вес, степень «ужирнения» шрифта. Для этого атрибута установлены значения: normal (обычный), bold, bolder, lighter, а также цифровые величины 100, 200, 300, …, 900 (такое разнообразие ступеней ужирнения шрифта полностью броузерами не реализуется);
• font-stretch – параметр, задающий степень разнесения знаков по горизонтали. Спецификацией CSS 2.0 предусмотрен ряд значений, которые в настоящее время броузерами не поддерживаются: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. Применение действия параметра font-stretch остается на будущее;
• font-size – чаще всего применяемый атрибут, задающий высоту шрифта. Атрибут принимает цифровые значения, выраженные в абсолютных единицах измерения: px - пиксели, pt - пункты, mm - миллиметры, cm - сантиметры еще in и pc, либо одно из значений:
  • font-size: xx-small;
  • font-size: x-small;
  • font-size: small;
  • font-size: medium;
  • font-size: large;
  • font-size: x-large;
  • font-size: xx-large;
  Можно также использовать относительные значения, которыми уменьшается или увеличивается размер шрифта, наследованный от родителя на древе документа;
  • font-size: smaller;
  • font-size: larger;
• font – сконцентрированная форма записи всех свойств шрифта.

Порядок записи для сокращенной записи свойств шрифта в CSS:

1. font-style,
2. font-variant,
3. font-weight,
4. font-size,
5. line-height,
6. font-family.

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить, то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Пример:

font: italic small-caps bold 1em/1.5em Arial, Helvetica, sans-serif;

Вместо:

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;