Начертание bold что это

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

Краткая информация

Синтаксис

Обозначения

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: 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: bolder» для шрифтов со множеством начертаний

Возьмём для примера Open Sans.

Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder ( lighter ) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Но в браузерной CSS прописано strong, b , т.е. унаследуется значение «700», а потом оно ещё и увеличивается до «900». Поэтому кажется, что bolder работает неправильно.

Исправить это можно так:

Именно так, как два отдельных правила. Первое обнуляет значение font-weight из браузерной таблицы стилей, второе задаёт жирность уже в относительных, а не абсолютных единицах.

Теперь нам не придётся заботиться о вложенности элементов — каскад всё сделает автоматически. Мы можем вкладывать теги strong друг в друга.

Вложенные теги «strong». Толщина шрифта определяется исходя из значения родительского элемента.
Демка

Ограничения

Используя относительные значения font-weight мы получаем только по три градации жирности шрифта для bolder и lighter соответственно. Спецификация не гарантирует, что браузеры правильно сопоставят названия начертаний и числовые значения. Не гарантирует, что для шрифта найдётся более жирное или более тонкое начертание. У некоторых шрифтов всего два начертания, у некоторых может быть восемь.

Единственной гарантией при использовании bolder / lighter является то, что шрифт при значении « bolder » не будет тоньше, чем более легкие начертания этого шрифта, а при значении « lighter » будет не толще, чем более жирные начертания этого шрифта.

Чтобы более тонко настроить вес шрифта, надо использовать абсолютные значения.

Источник

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

Браузеры

Источник

Как сделать жирный шрифт в HTML?

В этой статье представлены способы, позволяющие использовать полужирный шрифт в HTML.

Как сделать полужирный шрифт при помощи CSS-свойства font-weight

Давайте взглянем на следующий пример:

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

Делаем текст полужирным используя тег жирного шрифта в html

Большинство людей, знакомых с языком гипертекста, когда видят жирный шрифт HTML, сразу же вспоминают о теге .

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :

HTML-тег — самый быстрый способ вывести текст полужирным.

Как сделать текст полужирным — какой метод уместнее?

HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.