8. Шрифты

На этой странице:

• Семейства шрифтов
  • Серифные и рубленые
  • Пропорциональные и моноширинные
  • Рукописные и декоративные
  • Неалфавитные
  • Рекомендации Web-разработчику
    • Таблица со шрифтами, входящими в поставку Winows XP
• Насыщенность шрифта
• Размер шрифта
  • Предопределённые размеры
  • Ступенчатые переходы
  • Проценты
  • Использование единиц измерения длины
    • Единица измерения em
    • Пикселы
• Стиль шрифта
• Вариант шрифта
• Интегрированное свойство font
  • Задание высоты строки
  • Системные шрифты

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

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

Файл style.css BODY { color:black; background:white; font-family:Georgia,sans-serif; } H1,H2,H3,H4,H5,H6 { font-family:Verdana,Geneva,sans-serif; } .mono { font-family:"Courier New",monospace; }

Файл index.htm

Серифные и рубленые

Шрифты бывают с засечками (завитушками на кончиках букв) и без засечек. Первые шрифты называют серифными, вторые — рублеными.

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

Пропорциональные и моноширинные

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

Рукописные и декоративные

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

Декоративные шрифты — это шрифты, предназначенные, как следует из их названия, для разного рода украшательств, создания необычных заголовков. Формальному определению (по типу начертания букв) они не поддаются, можно лишь отметить невозможность отнести их к другому семейству шрифтов.

Несколько примеров декоративных шрифтов без русских букв (шрифты представлены названиями):

Неалфавитные

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

Примеры символов из шрифта Wingdings:

Примеры символов из шрифта Webdings:

Рекомендации Web-разработчику

Шрифтов очень много, но, к сожалению, Web-разработчик вынужден применять их большей частью “замурованными” в графику: на рисованных заголовках и страничных иллюстрациях.

Конечно, для любого текста на странице можно написать, например, указание font-family:Pirate. Однако шансы, что у пользователя будет на компьютере установлен этот шрифт, не велики, кроме того, в наборе символов шрифта может не оказаться русских букв (в этом шрифте их точно нет).

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

Любая графическая операционная система имеет три набора стандартных гарнитур, для Windows это:

• Times New Roman (серифный шрифт)
• Arial (рубленый шрифт)
• Courier New (моноширинный шрифт)

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

Ваше указание может, например, иметь вид:

font-family:Academy,"School Book",Journal,serif;  
    

Текст будет выводиться шрифтом Academy, если он есть на компьютере пользователя. Иначе браузер будет последовательно искать шрифты School Book, Journal. В случае полной неудачи, текст согласно указанию serif, будет показан “каким-нибудь” серифным шрифтом. В Windows этим шрифтом с большой вероятностью окажется Times New Roman.

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

Насыщенность шрифта

Свойство font-weight позволяет задать насыщенность шрифта. Чем выше насыщенность, тем шрифт темнее и выглядит более “жирным”.

Файл index.htm

CSS не гарантирует, что поддерживаются все 9 уровней плотности  — реально шрифты поддерживают только два уровня:

• normal, что эквивалентно 400,
• и bold, что эквивалентно 700.

Рассмотрим работу значений bolder и lighter.

  
P {font-weight:normal;}
P EM {font-weight:bolder;}
      

  
P {font-weight:bold;}
P EM {font-weight:lighter;}
      

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

Свойство font-size позволяет управлять размером шрифта.

Предопределённые размеры

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

Файл index.htm

Ступенчатые переходы

Значения smaller и larger изменяют размер на одну ступень относительно размера шрифта родителя. При этом используется тот же коэффициент масштабирования, что и при построении семи базовых уровня от xx-small до xx-large.

Пусть, например, для конкретного браузера размер medium равняется 16 пикселам, а коэффициент масштабирования — 1,2.

  
P {font-size:medium;}
P EM {font-size:smaller;}
      

  
P {font-size:medium;}
P EM {font-size:larger;}
      

  
P {font-size:100px;}
P EM {font-size:larger;}
      

Проценты

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

Файл style.css UL {font-size:200%;} Размер шрифта внешнего списка увеличен в 2 раза по отношению к BODY. Это же правило работает и для вложенного списка, но увеличение в 2 раза выполняется по отношению к его родителю UL. В итоге шрифт во вложенном UL в 4 раза крупнее шрифта BODY.

Файл index.htm

Использование единиц измерения длины

Свойство font-size может быть задано в любых единицах длины.

  
P {font-size:72pt;}
P {font-size:6pc;}
P {font-size:1in;}
P {font-size:2.54cm;}
P {font-size:25.4mm;}
      

Реально используют две единицы длины: em и пикселы.

Единица измерения em

Значение em работает как проценты, в том смысле, что 1em эквивалентно 100%, то есть равно размеру текущего шрифта.

  
P {font-size:2.5em;}
P {font-size:250%;}
      

Размеры, заданные в em, меняются пропорционально при изменении размера шрифта в браузере.

Пикселы

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

  
P {font-size:100px;}
      

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

Стиль шрифта

При помощи свойства font-style можно назначать курсив.

Курсивный шрифт задаётся специально нарисованной гарнитурой, входящей в состав семейства. Наклонный шрифт — это версия обычного шрифта, в которой прямые символы наклонены по математическому алгоритму.

Разница между курсивным и наклонным шрифтом хорошо видна на иллюстрации:

На рисунке представлено семейство Times New Roman. Курсивный вариант — это отдельный шрифт Times New Roman Italic, а наклонный — получен из прямого математическим преобразованием.

Файл style.css BLOCKQUOTE {font-style:italic;} BLOCKQUOTE EM {font-style:normal;} По принятому соглашению, если текст цитаты набирается курсивом, то выделения в нём должны иметь прямое начертание. Пример иллюстрирует решение этой типографской задачи.

Файл index.htm

Вариант шрифта

Нежелательно набирать капителью длинные (больше двух-трёх слов) фразы: читаемость капители заметно хуже читаемости обычного текста.

Капитель часто используется при вёрстке текстов, записанных латинскими буквами — прописные и строчные буквы в латинице сильно отличаются. Капителью могут оформляться заголовки, первые строки разделов, имена, названия, аббревиатуры.

В текстах, записанных кириллицей, капитель применяется редко. Прописные русские буквы практически повторяют строчные (за исключением Аа, Бб, Ее, Ёё, Рр, Уу, Фф).

Ниже приводится ещё один пример капители, отдельно на латинице и отдельно на кириллице.

Интегрированное свойство font

Таким образом, задать шрифт можно задать тремя способами. Первый вариант:

Стиль, вариант и плотность могут идти в любом порядке или отсутствовать, как и размер строки (вместе с косой чертой). Размер и семейство должны присутствовать обязательно и идти в указанном порядке. Если опустить все необязательные параметры, получится так:

Во втором варианте указывается системный шрифт (никакие другие параметры не допускаются):

В третьем варианте присутствует указание на шрифт родителя (никакие другие параметры не допускаются):

Пример

Файл style.css

  
BODY    
{ 
  color:black;
  background:white; 
  font:1em Georgia,sans-serif; 
}

H1 
{
  color:#090;
  font:bold small-caps 2em/1.2 Tahoma,Helvetica,sans-serif; 
}
P.footer
{
  color:#666;
  font-size:0.8em; 
  border-top:1px solid gray;
}
      

Файл index.htm

Задание высоты строки

Высота строки (необязательный параметр) задаётся как дополнение к значению font-size и отделяется от него косой чертой.

  
H1 
{
  font:bold small-caps 2em/1.2 Tahoma,Helvetica,sans-serif; 
}
      

Высота строки элемента H1 будет установлена в 2.4em.

Значение высоты строки вычисляется умножение размера шрифта элемента на коэффициент, записанный через косую черту.

Высоту строки можно задавать при помощи отдельного свойства line-height о чём будет рассказано в разделе, посвящённом CSS-свойствам текста.

Системные шрифты

Если на гипертекстовой странице желательно смоделировать среду операционной системы (системные кнопки, меню, диалоговые окна и т. п.), то в качестве единственного значения свойства font можно указать одно из следующих ключевых слов:

caption, icon, menu, message-box, small-caption, status-bar.

Ниже описаны значения этих ключевых слов и приводятся примеры.

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

.botton
{
  font:menu;
  font-size:2em; 
}