Свойство font - это настоящий «швейцарский нож» в мире CSS! Оно позволяет задать сразу несколько параметров шрифта одной строкой, что делает код гораздо чище и элегантнее. Для этого используются специальные ключевые слова (caption, icon, menu, message-box, small-caption, status-bar) или значения отдельных свойств: Как и во многих универсальных свойствах, не заданные параметры автоматически принимают значения по умолчанию. Однако здесь есть свои строгие правила! Если вы их проигнорируете, браузер просто откажется применять всё свойство целиком - это может стать источником раздражающих багов: - Обязательно укажите
font-size и font-family - без них никак. - Высота строки (
line-height) должна идти сразу после размера шрифта, разделенная косой чертой (слэшем) - "/". - Если вы хотите изменить стиль, вариант или жирность (
font-style, font-variant, font-weight), поместите их строго перед font-size. font-family всегда стоит последним. Обратите внимание: значение inherit здесь не работает! | Значение по умолчанию: | не определено | | Наследуется: | да | | Версия: | CSS1 | | Синтаксис JavaScript: | object.style.font="italic small-caps bold 12px arial,sans-serif" | | Значение | Описание | | font-style | Определяет стиль шрифта. Подробности смотрите в описании свойства font-style. | | font-variant | Указывает на разновидность начертания. Возможные значения описаны у свойства font-variant. | | font-weight | Отвечает за жирность текста. Список допустимых значений ищите у свойства font-weight. | | font-size/line-height | Задаёт размер букв и высоту строки. Детали описаны в свойствах font-size и line-height. | | font-family | Выбирает семейство шрифтов. Возможные варианты рассмотрены у свойства font-family. | | caption | Стандартный шрифт для текстовых элементов интерфейса (кнопок, списков и т.п.). | | icon | Шрифт, применяемый под системными иконками. | | menu | Шрифт для элементов выпадающих меню. | | message-box | Типовой шрифт для диалоговых окон системы. | | small-caption | Аналог caption, но с уменьшенным размером - идеально для мелкого текста в интерфейсе. | | status-bar | Шрифт для строки состояния приложения или окна браузера. | | inherit | Значение наследуется от родительского элемента (но помните, в контексте font-семейства это запрещено). | Примерhtml head style type="text/css" p.ex1 { font: 15px arial,sans-serif; } p.ex2 { font: italic bold 12px/1 Georgia,serif; } /style /head body p class="ex1"Пример демонстрирует, как можно изменить текст на странице с помощью свойства font. /p p class="ex2"С помощью свойства font можно отредактировать текст, например поменяв толщину шрифта, его размер и высоту строки./p /body /html
|