Подбор и загрузка шрифтов
Подбор шрифта
В этом разделе полностью описан механизм CSS по работе со шрифтами, основанный на их подборе, синтезе на основе базы данных или загрузке из Веб-узлов. Существуют четыре разновидности реализации этого механизма:
Подбор шрифта по его имени
В этом случае обозреватель использует шрифт, установленный на компьютере-клиенте и имеющий то же имя, что и запрошенный шрифт (при этом и гарнитура, и метрические характеристики шрифта могут оказаться отличными от авторских, если автор и пользователь загружали шрифты из разных источников).Таким образом, единственной основой для подбора шрифта является его имя. Это единственный метод, который использовался в CSS1 и который описан в предыдущем разделе.
Подбор шрифта по его характеристикам
В этом случае обозреватель использует шрифт, установленный на компьютере-клиенте и имеющий тот же внешний вид, что и запрошенный шрифт (при этом метрические характеристики шрифта могут оказаться отличными от авторских). Основой для подбора шрифта в данном случае служат такие его характеристики, как тип шрифта (текстовый или символьный), наличие или отсутствие засечек, жирность, высота строчных и прописных букв, наклон символов и т. п.
Синтез шрифта
В этом случае обозреватель создает шрифт, не только имеющий тот же внешний вид, что и запрошенный шрифт, но и соответствующий ему по метрическим характеристикам. Для такого синтеза шрифта необходима более точная информация, чем в схемам подбора шрифта. В частности, обозревателю необходимо знать точные ширины всех символов и правила отображения кодов Unicode в соответствующие изображения.
Загрузка шрифта
Обозреватель может, наконец, загрузить искомый шрифт из заданного Веб-узла аналогично тому, как при отображении документа загружаются графические образы, Java-аплеты и другие объекты. Это, однако, может приводить к существенной задержке при загрузке документа.
Из четырех перечисленных схем в современных обозревателях реализованы две: первая и последняя. Первая схема была описана в предыдущем разделе, а последняя, связанная с загрузкой шрифтов из Сети, описывается здесь.
Директива @font-face
Директива @font-face позволяет нам включать в свою таблицу стилей описания шрифтов. Она состоит из набора дескрипторов шрифта и их значений и имеет следующий вид:
@font-face {
дескриптор: значение;
...
дескриптор: значение;
}
Дескрипторы шрифтов можно разбить на три группы:
дескрипторы, обеспечивающие связь между описанием шрифта и его использованием в свойствах CSS (они имеют те же названия, что и соответствующие свойства);
дескриптор, задающий URI, на котором находятся данные шрифта для загрузки;
дескрипторы, задающие дальнейшие характеристики шрифта и обеспечивающие связь описания шрифта с его данными.
Пример директивы @font-face:
@font-face {
font-family: comic; // имя шрифта для CSS
src: url(http://www.fonts.com/comic.eot); // адрес файла для загрузки
}
| Поддержка : |  | Поддерживаются только дескрипторы font-family и src (5.0+) | | |  | Не поддерживается |
Дескрипторы свойств шрифта
Эта группа дескрипторов имеет те названия, что и соответствующие свойства CSS и могут иметь одно значение или несколько значений, разделенных запятыми. Если дескриптор не указан в директиве @font-face, то принимается его начальное значение.
| Поддержка : | | Соответствует стандарту (5.0+) | | | | Не поддерживается |
Этот дескриптор задает список имен семейств шрифтов и принимает те же значения, что и свойство font-family.
| Синтаксис: | font-style: all | [normal | italic | oblique][,[normal | italic | oblique]]* | | Начально: | all | | Устройства: | визуальные |
| Поддержка : | | Не поддерживаeтся | | | | Не поддерживаeтся |
Этот дескриптор задает стиль шрифта и может принимать те же значения, что и свойство font-style. Единственное отличие состоит в том, что его значением может быть список стилей или значение all (все стили).
| Синтаксис: | font-variant: [normal | small-caps][,[normal | small-caps]]* | | Начально: | normal | | Устройства: | визуальные |
| Поддержка : | | Не поддерживаeтся | | | | Не поддерживаeтся |
Этот дескриптор задает вариант шрифта и может принимать те же значения, что и свойство font-variant. Единственное отличие состоит в том, что его значением может быть список вариантов.
| Синтаксис: | font-weight: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900][,[normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* | | Начально: | all | | Устройства: | визуальные |
| Поддержка : | | Не поддерживаeтся | | | | Не поддерживаeтся |
Этот дескриптор задает жирность шрифта и может принимать те же значения, что и свойство font-weight, со следующими отличиями:
относительные значения (bolder и lighter) не допускаются;
значением может быть список жирностей;
значением может быть all (все жирности).
| Синтаксис: | font-stretch: all | [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded][,[normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]]* | | Начально: | normal | | Устройства: | визуальные |
| Поддержка : | | Не поддерживаeтся | | | | Не поддерживаeтся |
Этот дескриптор задает выключку шрифта и может принимать те же значения, что и свойство font-stretch, со следующими отличиями:
относительные значения (wider и narrower) не допускаются;
значением может быть список выключек;
значением может быть all (все выключки).
| Поддержка : | | Не поддерживаeтся | | | | Не поддерживаeтся |
Этот дескриптор задает размер шрифта и может принимать те же значения, что и свойство font-size, со следующими отличиями:
допускаются только абсолютные размеры шрифтов;
значением может быть список размеров;
значением может быть all (все размеры).
1 2 3 4
8 8 8
|
|
