Применение системных шрифтов

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

caption
Применяется для элементов управления, имеющих надпись, таких как кнопки.

icon
Применяется для подписи значков.

menu
Используется в меню, т. е. выпадающих меню и списках меню.

message-box
Используется в диалоговых окнах.

small-caption
Используется для небольших элементов управления.

status-bar
Применяется в строках состояния окон.

Пусть требуется сделать шрифт кнопки таким же, как и у кнопок операционной системы:

button {font: caption;}

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


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

button {font: caption; font-size: 1em;}

Если задан определенный системный шрифт, а на машине пользователя такого шрифта нет,агент пользователя может попытаться выполнить некоторое приближение, например, уменьшить размер шрифта caption, чтобы получить шрифт small-caption. Если такая аппроксимация невозможна, агент пользователя должен взять собственный применяемый по умолчанию шрифт. Если он может найти системный шрифт, но не может считать все его значения, тогда он должен взять его стандартное значение. Например, агент пользователя нашел шрифт status-bar, но не может получить информацию о том, является ли этот шрифт капителью. В этом случае агент пользователя присвоит свойству small-caps значение normal.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Абсолютные размеры
Варианты шрифтов
Загрузка шрифтов
Задание семейства шрифтов
Интеллектуальное сопоставление шрифтов

Вернуться в раздел: CSS / 5. Шрифт