Сокращённое свойство font
В CSS некоторые свойства могут быть сгруппированы вместе с другими свойствами для экономии времени и пространства. Свойство font группирует следующие свойства (именно в таком порядке):
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Таким образом, вы можете определить шесть свойств через одно единственное:
body < font: italic small-caps bold 16px/1.5 Arial, sans-serif; >Значения должны быть написаны именно в таком порядке и должна быть косая черта / между font-size и line-height .
Хотя я определил все шесть свойств, только font-size и font-family являются обязательными. Таким образом, можно опустить определение других свойств, если вы намерены сохранить их значения по умолчанию:
body < font: bold 16px/1.5 Arial, sans-serif; >Поскольку здесь font-style и font-variant не определены, они будут использовать значение по умолчанию normal .
Осторожно! Если вы ранее определили одно из свойств шрифта и используете впоследствии свойство font , то оно перепишет заданные ранее значения.
body < font-size: 16px; line-height: 1.5; >ul
В этом свойстве font , line-height не было определено, поэтому потеряет значение своего предка 1.5 и вернётся к своему значению по умолчанию (обычно 1.2).
Существуют и другие сокращённые свойства, такие как background , border и margin .
CSS свойство font
Универсальное свойство, позволяющее определить все свойства шрифта за одну декларацию.
Установить можно следующие свойства (в соответствующем порядке): «font-style font-variant font-weight font-size/line-height font-family».
Значения font-size и font-family обязательны. Если остальные значения не указываются, то будут использованы значения по умолчанию.
Свойство line-height устанавливает расстояние между строками.
CSS синтаксис
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| font-style | Устанавливает стиль шрифта. Значение по умолчанию «normal». |
| font-variant | Устанавливает способ представления строчных букв. Значение по умолчанию «normal». |
| font-weight | Устанавливает «жирность» шрифта. Значение по умолчанию «normal». |
| font-size/line-height | Устанавливает размер шрифта и расстояние между строк. Значение по умолчанию «normal». |
| font-family | Устанавливает семейство шрифта. Значение по умолчанию зависит от браузера. |
| caption | Шрифт для текста элементов форм вроде кнопок. |
| icon | Шрифт для текста под иконками. |
| menu | Шрифт применяемый в меню. |
| message-box | Шрифт для диалоговых окон. |
| small-caption | Шрифт для подписей к небольшим элементам управления. |
| status-bar | Шрифт для строки состояния окон. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Определяем все свойства шрифта за одну декларацию
p.ex1 < font: 15px arial, sans-serif; >p.ex2 < font: italic bold 12px/30px Georgia, serif; >
CSS: Обобщённое правило для шрифтов
Удобным способом задать свойства для шрифта является использование правила font , которое позволяет указать:
- font-style
- font-variant
- font-weight
- font-size / line-height (эти два правила записываются через слэш)
- font-family
Шесть разных правил внутри одного! Это помогает сократить CSS код и улучшить его читабельность. Обязательными из них являются font-size и font-family . Остальные можно не указывать.
Пример записи со всеми возможными правилами: font: italic small-caps bold 24px/1.2 Arial;
Предположим, что нам нужен жирный курсив с размером шрифта 24 пикселя из семейства шрифтов Arial, тогда правило в CSS будет выглядеть следующим образом:
.text
Жирный курсив с размером шрифта 24 пикселя из семейства Arial
Обратите внимание на порядок использования значений внутри свойства font . Вначале идут стилистические правила, затем размер шрифта и его межстрочный интервал и потом семейство шрифта. Это важно, так как при другом порядке браузер может некорректно обработать результат.
При указании свойства font-family также рекомендуется указать универсальное семейство шрифтов. Это необходимо для того, чтобы при отсутствии шрифта у пользователя был выбран подходящий из установленных в его системе. Как и при указании одиночного свойства font-family , все шрифты должны быть отделены запятыми. Это же касается и семейства шрифта.
.text
Использование одного правила или нескольких
Этот раздел относится не только к правилу font , но и ко всем обобщённым правилам, которые вы изучите в процессе прохождения курса. С одной стороны, кажется, что использование одного правила сокращает количество строк, которые используются в CSS. Это действительно так, но есть две основные проблемы использования таких свойств:
- Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило
- Обобщённые свойства перебивают отдельные. Если в коде вы указали font-variant: small-caps; , а потом для этого же элемента применили font: 16px/24px sans-serif; , то капитель будет сброшена в значение по умолчанию
Задание
Добавьте в редактор параграф с классом bold-text и установите следующие правила используя обобщённое свойство font :
- Жирное начертание
- Размер шрифта: 24px
- Шрифт Verdana
- Семейство шрифтов: без засечек
Стили запишите в теге
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
font¶
Свойство font универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.
Демо¶
Шрифт и Цвет
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- line-height
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
/* size | family */ font: 2em 'Open Sans', sans-serif; /* style | size | family */ font: italic 2em 'Open Sans', sans-serif; /* style | variant | weight | size/line-height | family */ font: italic small-caps bolder 16px/3 cursive; /* style | variant | weight | stretch | size/line-height | family */ font: italic small-caps bolder condensed 16px/3 cursive; /* The font used in system dialogs */ font: message-box; font: icon; /* Global values */ font: inherit; font: initial; font: unset; Значения¶
В качестве обязательных значений свойства font указывается размер шрифта и его семейство. Остальные значения являются опциональными и задаются при желании. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.
Допускается в качестве значения использовать ключевые слова, определяющие шрифт различных элементов операционной системы пользователя.
Шрифт для текста элементов форм вроде кнопок.
Шрифт для текста под иконками.
Шрифт применяемый в меню.
Шрифт для диалоговых окон.
Шрифт для подписей к небольшим элементам управления.
Шрифт для строки состояния окон.
Значение по-умолчанию: зависит от использования
Применяется ко всем элементам
Спецификации¶
- CSS Fonts Module Level 3
- CSS Level 2 (Revision 1)
- CSS Level 1
Описание и примеры¶
1 2 3
p font: 12pt/10pt sans-serif; > Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт ( sans-serif ).
1 2 3
p font: bold italic 110% serif; > Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками ( serif ).
1 2 3
p font: normal small-caps 12px/14px fantasy; > Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
html> head> meta charset="utf-8" /> title>fonttitle> style> .layer1 font: 12pt sans-serif; > h1 font: 2em serif; > style> head> body> div class="layer1"> h1>Экзистенциальный либерализмh1> p> Карл Маркс исходил из того, что типология средств массовой коммуникации неизбежна. p> div> body> html>