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

font-weight

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

Интерактивный пример

Синтаксис

font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; /* Global values */ font-weight: inherit; font-weight: initial; font-weight: unset; 

Значения

Нормальное начертание. То же, что и 400 .

Полужирное начертание. То же, что и 700 .

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900

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

Недоступность заданного значения

Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:

• Если задано значение выше 500 , будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
• Если задано значение менее 400 , будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
• Если задано значение 400 , будет применено 500 . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400 .
• Если задано значение 500 , будет применено 400 . Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400 .

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значение	жирнее	светлее
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

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

Интерполяция

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

Формальный синтаксис

font-weight =
| (en-US)
bolder | (en-US)
lighter

=
normal | (en-US)
bold | (en-US)

Примеры

HTML

p> Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?' p> div> I'm heavybr /> span>I'm lighterspan> div> 

CSS

/* Назначение тексту элемента 
жирного начертания. */ p  font-weight: bold; > /* Назначение тексту элемента жирности, которая больше на два уровня, чем normal, но все ещё меньше, чем стандартный bold. */ div  font-weight: 600; > /* Назначение тексту элемента жирности, которая на один уровень меньше, чем у его родителя. */ span  font-weight: lighter; > 

Result

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

Specification
CSS Fonts Module Level 4 # font-weight-prop

Начальное значение	normal
Применяется к	all elements and text. Это также применяется к ::first-letter и ::first-line .
Наследуется	да
Обработка значения	ключевое слово или числовое значение, с bolder и lighter , трансформируемися в действительное значение
Animation type	жирность шрифта

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

font-weight

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение bold .

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

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

Значение по умолчанию:	normal
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

Значения свойства

Значение	Описание
normal	Определяет стандартное написание символов.
bold	Задает жирное начертание символов в тексте.
bolder	Тоже самое, что и bold.
lighter	тоже самое, что и normal.
100 200 300 400 500 600 700 800 900	Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit	Указывает, что значение наследуется от родительского элемента.

Сделать жирным одно слово в предложении через CSS

Чтобы выделить одно слово из предложения жирным шрифтом средствами HTML нужно использовать тэг Word или Word . Но, все говорят, что нужно оформление полностью делать в CSS. За жирность в CSS отвечает font-weight: . Я пробовал заключать слово в , но он переносит текст за измененным словом на новую строку. Как можно решить проблему?

Отслеживать
задан 6 фев 2016 в 12:53
7 1 1 серебряный знак 4 4 бронзовых знака
не слушайте этих ВСЕХ, это глупость. используйте strong , он для того и придуман.
6 фев 2016 в 13:53
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
7 фев 2016 в 6:06

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Поместить его в тег span :

span.bold

Привет, мир!

Отслеживать
ответ дан 6 фев 2016 в 12:56
5,542 3 3 золотых знака 21 21 серебряный знак 41 41 бронзовый знак

Иногда семантика неотделима от оформления — в таком случае просто используйте или .

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

Универсальным инлайновым тэгом является . Но использовать его желательно только вместе с уточнением в виде класса:

foo span.selected-word

Ну и по поводу . Этот тэг использовать также можно, если задать ему стиль display: inline . Но я бы не рекомендовал так делать, поскольку семантика тут точно нарушится (div — это раздел в тексте, а никак не слово).

CSS шрифт, стиль и размер шрифта

Существует множество видов шрифтов, которые образуют так называемые семейства:

• Georgia, Times New Roman, serif
• Arial, Helvetica, sans-serif
• Courier New, Courier, monospace
• Verdana, Geneva, sans-serif
• Times New Roman, Times, serif

1. Шрифт в CSS | Семейства шрифтов, примеры
2. Шрифт в CSS | Изменяем вид и тип шрифта
3. Тип CSS шрифта | Наклонный, жирный шрифт
4. CSS шрифт | Определяем размер шрифта

CSS виды и семейства шрифтов:

font-family:	Pезультат
Verdana, Geneva, sans-serif	Семейство шрифтов без засечек
Arial, Helvetica, sans-serif	Семейство шрифтов без засечек
‘Times New Roman’, Times, serif	Семейство шрифтов с засечками
‘Courier New’, Courier, monospace	Семейство моноширинных шрифтов

Verdana, Geneva, sans-serif — семейство шрифтов без засечек:

Times New Roman, Times, serif — семейство шрифтов с засечками:

Courier New, Courier, monospace — семейство моноширинных шрифтов:

Еще пример форматирования:

Обычный текст Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman

В примере выше стилевые описания распространяются на параграфы данного документа. Атрибут font-family: содержит три различных шрифта, одного семейства (с засечками). Указывать их можно в различном порядке, но будет применен первый или второй если браузер не сможет найти на компьютере пользователя установленный первый шрифт, или третий, если программа браузера не прочтет первые два. При написании кода, название, состоящее из нескольких слов выделяется кавычками, например, ‘Times New Roman’ .

Д ля web-сайтов рекомендуется применять шрифты без засечек, чтобы не затруднять чтение текста.

Шриф sans-serif является представителем семейства шрифтов без засечек. К нему относятся Verdana, Geneva и другие. Если прописать код: font-family: sans-serif — программа браузера выберет на компьютере пользователя один из шрифтов без засечек, например, Verdana . Если обозначить: font-family: serif — будет выбран шрифт семейства с засечками, например, Times . CSS aтрибут со значением font-family: monospace — установит моноширинный шрифт, к примеру, Courier New .

CSS aтрибут font-family: определит, выбранный вами, вид шрифта. Можно установить свой шрифт, но нет ни какой гарантии, что он будет присутствовать на компьютере пользователя. Если его там не окажется, программа браузера не сможет правильно интерпретировать, указанный вами, шриф.

CSS наклонный и жирный шрифт

Определим наклонный шрифт:

CSS атрибут со значением style=»font-style:italic» определяет наклонный шрифт.

Определим жирный шрифт:

CSS ключение style=»font-weight:bold» определяет жирный шрифт.

Определим нормальный объем шрифта:

Строчка style=»font-weight:300″ преобразует жирный шрифт в обычный.

CSS размер шрифта

Пример с изменением размера:

Текстовая строка размером 13 пикселей. Текстовая строка размером 16 пикселей.

Текстовая строка размером 13 пикселей.

Текстовая строка размером 16 пикселей.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS код в HTML CSS шрифт и его размер CSS свойства текста

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | CSS жирный шрифт, размер? – Не вопрос!