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

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

a.widget {font: caption;}
Согласно этому правилу шрифт любого элемента a класса widget будет принадлежать к тому же семейству шрифтов, иметь те же размер, насыщенность, стиль и вариант, что и текст элементов управления, имеющих надпись, таких как кнопка. CSS2 определяет шесть системных ключевых слов для задания шрифта. Они перечислены в следующем списке:
caption
Стили шрифтов, используемых для элементов, имеющих надпись, таких как кнопки и выпадающие списки.

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

menu
Стили шрифтов, применяемые для представления текста в выпадающих меню и списках меню.

message-box
Стили шрифтов, применяемые для представления текста в диалоговых окнах.

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

status-bar
Стили шрифтов, применяемые для вывода текста в строках состояния окон.

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


Допустим, что для подписей значков операционной системы пользователя выбран 10-пиксельный шрифт Geneva без применения эффектов полужирного, курсивного начертания или капители. Это значит, что следующие три правила эквивалентны:

body {font: icon;}
body {font: 10px Geneva;}
body {
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 10px;
font-family: Geneva;
}

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

body {font: icon; font-weight: bold;}

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


Если бы порядок написания был обратным, то значение свойства font переопределило бы значение font-weight из второго определения и правило о полужирном начертании было бы утеряно. Это соответствует способу, которым обрабатываются сокращенные записи свойств (как для собственно свойства font). Вас может удивить отсутствие базового семейства шрифтов, поскольку обычно авторам рекомендуется писать что-то вроде Geneva, sans-serif; (в том случае, если броузер пользователя не поддерживает заданный шрифт). CSS не разрешит добавить базовое семейство шрифтов, но в этом случае в нем нет необходимости. Если агент пользователя может получить семейство шрифтов, используемое для представления какого-либо элемента в интерфейсе операционной системы, будьте уверены, что этот же шрифт доступен и для броузера.

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

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

Статьи из раздела CSS на эту тему:
Графические курсоры
Задание стиля контура
Изменение курсора
Контуры
Курсоры