font weight что это значит в css

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

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

Версии 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 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 «, но вместо этого наследуют вычисленную толщину.

Источник

Свойство 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, а вместо этого унаследуют вычисленный вес.

Что происходит при недоступности заданного значения

Если заданное числовое значение веса недоступно, для определения жирности применяется такой подход:

Источник

CSS-свойства для шрифтов

Шрифт в английском языке переводится как font или type. Первый вариант перевода мы будем использовать для различных css-свойств, которые позволяют управлять шрифтами на html-странице, а второй, как правило, обозначает инструмент Текст в Photoshop или в Figma, и формирует такой известный термин, как типографика (typography), т.е. наука о шрифтах.

Рассмотрим шрифтовые свойства в CSS.

Свойство color меняет цвет шрифта со стандартного черного на любой заданный вами или на прозрачный ( transparent ).

Цвет текста влияет не только на сам текст, но и на

Наследование свойств. Значение inherit и initial

Значение initial возвращает элементу значение по умолчанию, которое установлено настройками браузера или его таблицей стилей.

Варианты записи font-family :

Кстати, в большинстве текстовых редакторов, которыми вы можете воспользоваться для редактирования HTML и CSS, есть плагин Emmet, в в Emmetе есть целый ряд аббревиатур для вставки различных значений свойства font-family :

Как работают эти аббревиатуры в редакторе Visual Studio Code можно посмотреть ниже:

Протестируйте назначение шрифтов с помощью свойства font-family на примере:

В каждом браузере есть настройки для шрифтов, которые вы можете изменить под себя. Именно здесь указывается шрифт по умолчанию, который берется из системы в качестве шрифта-псевдонима. В браузере Chrome они выглядят так:

Здесь же вы можете настроить размер каждого шрифта.

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

Свойство наследуется от родительского элемента.

Давайте рассмотрим примеры того, как записывается это свойство в CSS:

Почему это важно? Абсолютные значения font-size будут одинаковыми для элементов с любым начальным размером шрифта, а относительные будут зависеть от размеров родительского элемента. Кроме того, от размеров родителя зависят значения в % и em, т.к. по сути это одно и то же, но % указываются как 200% для увеличения размера шрифта текущего элемента в 2 раза, а 2em задаются в виде коэффициента увеличения.

Размер шрифта родительского элемента 18px (font-size: 16px | 18px | 20px )

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non neque placeat recusandae voluptatibus optio reprehenderit, eveniet magni veniam atque facere delectus corrupti eaque porro sed praesentium. Earum nisi soluta iusto.

Dolorem quaerat molestiae soluta beatae voluptates itaque? Quod deleniti, labore voluptatibus, accusamus veritatis ullam consequatur facere rem doloremque provident, fugiat officiis voluptatem fugit ut beatae. Porro nostrum deleniti perspiciatis amet.

Свойство line-height определяет минимальную высоту строки текста. В типографике соответствует параметру интерлиньяж. Это довольно важное свойство, т.к. с его помощью можно уменьшить или увеличить расстояния между строками для лучшкго восприятия текста.

Возможные значения line-height :

Свойство наследуется от родительского элемента.

Протестируйте различные варианты свойства line-height на примере:

Итак, доступные значения свойства font-weight :

Примеры использования значений font-weight в CSS:

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

В таблице ниже приведены значения шрифта от 100 до 900, их названия согласно документации на MDN (рус. | англ.) и их внешний вид для шрифта Montserrat, который используется в примерах для этой статьи. Здесь четко видно, как тонкий шрифт со значением 100 постепенно «утолщается» для каждого следующего значения.

Важно понимать, что далеко не у всех шрифтов есть все 9 начертаний, представленных в таблице. Каждому шрифту должен соответствовать файл шрифта, который должен находится в вашей ОС в папке Fonts или загружаться из какой-либо папки на сайте. Иначе вы не сможете заметить различий между некоторыми значениями просто потому, что соответствующий файл для этого шрифта просто не предусмотрен автором-разработчиком шрифта.

Значение	Название файла шрифта	Отображение шрифта Montserat
100	Thin (Hairline)/ Тонкий (Волосяной)
200	Extra Light (Ultra Light)/ Дополнительный светлый (Сверхсветлый)
300	Light/ Светлый
400	Normal (Regular)/ Средний
500	Medium/ Нормальный
600	Semi Bold (Demi Bold)/ Полужирный
700	Bold/ Жирный
800	Extra Bold (Ultra Bold)/ Дополнительный жирный (Сверхжирный)
900	Black (Heavy)/ Чёрный (Густой)

Как выглядят слова с различным начертанием для шрифта с засечками lora.

Значения свойства font-style :

Тестируем варианты назначения свойства font-style в примере ниже. Обратите внимание на ссылку в правом углу с текстом «Загрузить шрифты italic». Без загрузки шрифтов с курсивным начертанием мы получаем наклонное отображение букв, которое может выполнить браузер своими средствами. И только загрузив нужные файлы шрифтов, мы видим курсивное начертание букв. Лучше всего это видно на примере шрифтов с засечками, т.к. шрифты без засечек отображаются примерно одинаково как при загрузке шрифтов, так и без нее.

Свойство наследуется от родительского элемента.

Варианты использования значений свойства в CSS:

Источник