Как сделать жирность текста в css

font-weight

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

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

Значение по умолчанию	normal
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — жирное начертание и normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Вот как числовые значения влияют на насыщенность шрифта.

• 100 — тонкое начертание;
• 200 — сверхсветлое;
• 300 — светлое;
• 400 — нормальное (аналогично normal );
• 500 — среднее;
• 600 — полужирное;
• 700 — жирное (аналогично bold );
• 800 — сверхжирное;
• 900 — тяжёлое.

Учтите, что не все шрифты поддерживают этот набор. Если указанное значение не поддерживается, то браузер приведёт шрифт к ближайшей насыщенности. К примеру, если вы указали 900 и оно не может быть показано, то браузер в действительности применит значение 700 как ближайшее, которое работает корректно.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

100 300 400 500 700 900

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900); div < font-family: Roboto, sans-serif; font-weight: >; >

Пример

Мелодический голос персонажа

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

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

Объект.style.fontWeight

Спецификация

Спецификация	Статус
CSS Fonts Module Level 3	Возможная рекомендация
CSS Transitions	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

3.5

12

2

3.5

1.3

1

1

1

6

3.1

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• Насыщенность
• Свойства шрифта в CSS

Почему жирность текста в css отличается от жирности текста в макете figma?

Здравствуйте, жирность текста в фигма задана 500px, даже выставляя 1000px в css жирность не похожа на макетную. Как это исправить?

• Вопрос задан более года назад
• 617 просмотров

Комментировать

Решения вопроса 2

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

@font-face < font-family: 'Commissioner'; src: url('fonts/Commissioner/Commissioner-Regular.eot'); src: local('Commissioner Regular'), local('Commissioner-Regular'), url('fonts/Commissioner/Commissioner-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Commissioner/Commissioner-Regular.woff2') format('woff2'), url('fonts/Commissioner/Commissioner-Regular.woff') format('woff'), url('fonts/Commissioner/Commissioner-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; >@font-face < font-family: 'Commissioner'; src: url('fonts/Commissioner/Commissioner-Medium.eot'); src: local('Commissioner Medium'), local('Commissioner-Medium'), url('fonts/Commissioner/Commissioner-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Commissioner/Commissioner-Medium.woff2') format('woff2'), url('fonts/Commissioner/Commissioner-Medium.woff') format('woff'), url('fonts/Commissioner/Commissioner-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; >

имя у шрифта одно, а вот жирность разная. При этом лучше не забывать о разных браузерах а также о том,что шрифты могут быть в системе пользователя(в этом случае ничего грузиться не будет). В целом, формат .eot — это атавизм для IE, но до сих пор лежит в готовых паках до кучи.

Ответ написан более года назад

Нравится 5 1 комментарий

Как из тегов h1, h2, h3 сделать обычный текст?

Собственно сабж. Что надо в css прописать чтобы текст находивщийся в этих тегах слился с обычным текстом и никак себя не выдал? Убрать жирность и настроить размер получается. А вот чтобы не с новой строки начинался текст — никак не получается. Для наглядности пример:

текст текст текст текст текст текст

текст

текст текст

Будет выглядить так:

текст текст текст текст текст текст
текст
текст текст

Благодарю заранее.

На сайте с 03.09.2009

20 марта 2016, 07:23

h1 font-weight: normal; // не жирный
font-size: 10px // размер текста
font-family: arial // шрифт текста
>

Не зная какой у вас стиль обычного текста — гадать на кофейной гуще 🙂

apt.ru

Timeweb — компания, которая размещает проекты клиентов в Интернете, регистрирует адреса сайтов и предоставляет аренду виртуальных и физических серверов. Разместите свой сайт в Сети — расскажите миру о себе!

Виртуальный хостинг

Быстрая загрузка вашего сайта, бесплатное доменное имя, SSL-сертификат и почта. Первоклассная круглосуточная поддержка.

от 196 руб руб. / мес

Аренда VDS и VPS

Виртуальные серверы с почасовой оплатой. Меняйте конфигурацию сервера в любой момент и в пару кликов.