Что такое font weight
font-weight
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight |
Версии CSS
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Синтаксис
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Объектная модель
[window.]document.getElementById(» elementID «).style.fontWeight
Браузеры
font-weight
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight |
Версии CSS
Описание
Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.
Синтаксис
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства font-weight
Объектная модель
[window.]document.getElementById(» elementID «).style.fontWeight
Браузеры
font-weight
Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
Обозначения
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [, ]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.
Вот как числовые значения влияют на насыщенность шрифта.
Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.
Свойство CSS font-weight
Свойство font-weight в CSS устанавливает начертание (еще говорят толщину или насыщенность) шрифта и зависит от доступных вариантов в семействе шрифтов, а также от вариантов, определенных браузером.
Например, чтобы сделать жирный шрифт, нужно задать свойство:
Значения
Свойство font-weight принимает либо значения в виде ключевых слов, либо числа в диапазоне от 100 до 900.
Доступные ключевые значения:
normal обычный, соответствует числу 400 bold жирный текст, соответствует числу 700 bolder более жирный относительно начертания родителя lighter более тонкий относительно родителя
Также есть 2 вспомогательных значения:
Чтобы установленное начертание отобразилось на сайте, необходимо, чтобы шрифт его поддерживал. Как правило, большинство шрифтов поддерживают только часть значений.
Если шрифт имеет жирное («700») или нормально («400») начертание как часть семейства, браузер будет использовать их. Если они недоступны, браузер смоделирует собственные жирную или нормальную версию. Но он не будет моделировать другие недоступные варианты жирности.
Следующая демонстрация показывает использование различных вариантов жирности для текста:
В приведенной выше демонстрации используется шрифт Open Sans, встроенный с помощью Google Fonts API. Загружаются все доступные варианты жирности. Недоступные варианты просто отображают ближайшим вариантом.
Обычные шрифты, такие как Arial, Helvetica, Georgia и т. д. не имеют начертаний, отличных от 400 и 700. Таким образом, в той же демонстрации с применением одного из этих шрифтов, в девяти абзацах будет отображаться только два варианта жирности.
Использование bolder и lighter
Толщина шрифта bolder и lighter (жирнее и тоньше) вычисляется относительно родительского элемента. Браузер будет искать ближайший «более жирный» или «легкий» вес, в зависимости от того, что доступно в семействе шрифта, в противном случае он просто выберет «400» или «700», в зависимости от того, что логичнее.
Дочерние элементы не будут наследовать bolder и lighter, а вместо этого унаследуют вычисленный вес.
Что происходит при недоступности заданного значения
Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:
Свойство font weight CSS
Свойство font-weight CSS задает толщину шрифта, оно зависит либо от установленных правил начертания в семействе шрифтов, либо от толщины, определенной в браузере.
В качестве значения свойство font-weight принимает ключевое слово или числовое значение. Доступные ключевые слова:
Доступные числовые значения:
Значение ключевого слова normal соответствует числовому значению 400, а значение CSS font weight bold — числовому значению 700.
Чтобы к шрифту мог быть применен другой размер, кроме 400 или 700, для него должны быть установлены встроенные правила начертания с соответствующими им числовыми коэффициентами.
Если шрифт имеет жирную (« 700 «) или обычную (« 400 «) версию, то браузер будет использовать их. Если они не доступны, браузер будет имитировать собственную жирную или нормальную версию. Для шрифтов часто используют такие названия, как « Regular » и « Light «, чтобы определить альтернативные значения толщины шрифта.
Следующая демо-версия иллюстрирует использование альтернативных значений толщины:
Посмотреть демо — версию
Использование ключевых слов «bolder» и «lighter»
Значения ключевых слов « bolder » и « lighter » зависят от вычисляемой толщины шрифта родительского элемента. Браузер будет искать ближайшую к « bolder » или « lighter » толщину в семействе шрифта. Иначе браузер просто установит « 400 » или « 700 «.
Дочерние элементы не наследуют значения ключевых слов « bolder » и « lighter «, но вместо этого наследуют вычисленную толщину.