CSS/Свойство font-weight
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit;
Описание
Свойство font-weight устанавливает жирность шрифта.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | присутствует; |
| Проценты: | не используются; |
| Медиа: | визуальные. |
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| CSS | Раздел | |
|---|---|---|
| 1 | 5.2.5 ‘font-weight’ | Перевод |
| 2 | 15.2.3 Font styling… ‘font-weight’… | |
| 2.1 | 15.6 Font boldness: the ‘font-weight’ property | Перевод |
| 2.2 | 15.6 Font boldness: the ‘font-weight’ property | |
| 3 | 3.2 Font weight: the font-weight property | Перевод |
Значения
- normal
- Устанавливает нормальный вариант шрифта.
font-weight: normal; - bold
- Устанавливает жирный вариант шрифта.
font-weight: bold; - 100, 200, 300, 400, 500, 600, 700, 800, 900
- Указывает степень жирности (варианты жирности). При этом степень жирности равная «
400» приравнивается к значению «normal», а «700» приравнивается к значению «bold».Примечание: большинство семейств шрифтов, как правило, имеют только «нормальные» и «полужирные» варианты шрифтов;
- bolder
- Увеличивает степень жирности шрифта. За основу берётся значение родительского элемента.
- lighter
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «normal».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство font-weight</title>
<style type=»text/css»>
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.lighter { font-weight: lighter; }
</style>
</head>
<body>
<h2>Жирность шрифта</h2>
<p>Пример текста с <span>разными</span> <span>вариантами</span> <span>жирности</span>.</p>
</body>
</html>
font-weight — Справочник CSS
schoolsw3.comСАМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
#10094; Назад CSS Справочник Далее #10095;
Пример
Установить разный вес шрифта для трех параграфов:
p.
normal {font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
Определение и использование
Свойство font-weight задает, как толстые или тонкие символы в тексте, которые должны отображаться.
| Значение по умолчанию: | normal |
|---|---|
| Унаследованный: | да |
| Анимируемый: | да. Прочитать о animatable Попробовать |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.fontWeight=»bold» Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| font-weight | 2. 0 | 4.0 | 1.0 | 1.3 | 3.5 |
CSS Синтаксис
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| normal | Определяет обычные символы. Это значение по умолчанию | Воспроизвести » |
| bold | Определяет толстые символы | Воспроизвести » |
| bolder | Определяет толще символы | Воспроизвести » |
| lighter | Определяет тоньше символы | Воспроизвести » |
| 100 200 300 400 500 600 700 800 900 | Определяет от тонкого к толстому символу. 400 такой же, как и обычный, и 700 такая же, как смелый | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Связанные страницы
CSS Учебник: CSS Шрифт
CSS Справочник: Свойство font
HTML DOM Справочник: Свойство fontWeight
#10094; Назад CSS Справочник Далее #10095;
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний.
Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять
Условия к использованию,
Cookies и политика конфиденциальности. Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
[HTML] — Как сделать текст полужирным в HTML и CSS — SheCodes
Узнайте, как сделать текст полужирным с помощью HTML-тега strong или свойства CSS font-weight.
👩💻 Технический вопрос
Спросил 1 месяц назад в HTML by Emer
как выделить шрифт жирным шрифтом?
HTML CSS шрифт полужирный
Дополнительные вопросы по кодированию в HTML👩💻 Технический вопрос
Как сделать так, чтобы
заполнил всю ширину страницы>HTML CSS див ширина стр.
👩💻 Технический вопрос
Спросил 20 дней назад в HTML от Jazmare
Как добавить иконки в свой HTML
HTML икона Шрифт потрясающий материальные иконки КСС
👩💻 Технический вопрос
Спросил 21 день назад в HTML Ким
Как округлить изображение.
изображение круглый Контекст объяснить вопрос
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 21 день назад в HTML от Хейзел
Логотип заголовка и панель навигации должны быть на одной линии
заголовок навигация флексбокс КСС
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 21 день назад в HTML by Sofia
При отправке формы предупреждайте о значении ввода пароля
HTML форма вход представлять на рассмотрение оповещение
👩💻 Технический вопрос
Спросил 21 день назад в HTML Сара
Что такое каркас?
каркас макет компоненты дизайн
👩💻 Технический вопрос
Спросил 22 дня назад в HTML по аниме
как я могу центрировать div
HTML CSS центр див поля
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 22 дня назад в HTML by Sofiia
Если пользователь не вводит свое имя, Оповещение «Мне очень плохо»
HTML JavaScript тревога проверка формы
👩💻 Технический вопрос
Спросил 22 дня назад в HTML Эндрю
Как подключить мой SiteController к моим html-файлам
на стороне сервера PHP включать СайтКонтроллер
👩💻 Технический вопрос
Спросил 22 дня назад в HTML by Elicea
Почему не работает ни кнопка, ни текстовая форма?
кнопка текстовая форма ошибка синтаксиса библиотека зависимость поведение кода
👩💻 Технический вопрос
Спросил 23 дня назад в HTML от Luyanda
как добавить смайлики на веб-сайт с помощью языка html и CSS?
HTML CSS смайлики Юникод стиль
👩💻 Технический вопрос
Спросил 23 дня назад в HTML by Katusiime
как добавить символ градуса
HTML символ градуса сущность Сочетание клавиш Windows ПК Мак
👩💻 Технический вопрос
Спросил 23 дня назад в HTML Лаура
как закодировать форму поиска с кнопкой отправки рядом с одним столбцом?
HTML CSS форма поиска кнопка отправки столбец
👩💻 Технический вопрос
Спросил 23 дня назад в HTML by Laura
как закодировать форму поиска с кнопкой отправки рядом с ней в строке и в одном столбце?
HTML CSS форма поиска кнопка отправки флексбокс
👩💻 Технический вопрос
Спросил 23 дня назад в HTML by Laura
как закодировать кнопку рядом с формой поиска?
HTML CSS кнопка форма поиска
👩💻 Технический вопрос
Спросил 23 дня назад в HTML от Ambar
вы можете добавить css
CSS стиль HTML-документ <стиль> <ссылка>
👩💻 Технический вопрос
Спросил 23 дня назад в HTML by Charisma
напишите код jsp для сохраненного значения в динамическом раскрывающемся списке.
джсп падать динамичный массивСписок значения
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 23 дня назад в HTML by Charisma
напишите код jsp для сохраненного значения в раскрывающемся списке
джсп падать ценности динамичный база данных
👩💻 Технический вопрос
Спросил 24 дня назад в HTML от Mehregan
что делает div в html?
HTML див контейнер группировка макет
👩💻 Технический вопрос
Спросил 24 дня назад в HTML Эмили
как добавить кодер, женский смайлик в html
HTML эмодзи код символа Юникод
👩💻 Технический вопрос
Спросил 24 дня назад в HTML by Ghazale
как настроить тег img с помощью тега span
HTML CSS img-тег тег span стиль
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 24 дня назад в HTML по Тск
создать форму входа
HTML CSS JavaScript форма входа
👩💻 Технический вопрос
Спросил 24 дня назад в HTML от Guguelethu
Я пытаюсь скопировать шрифт из Google в песочницу, но песочница не дает мне возможности вставки
HTML шрифты Гугл шрифты Песочница загрузить
👩💻 Технический вопрос
Спросил 24 дня назад в HTML Виктория
как сделать кнопку в html
HTML кнопка элемент атрибуты форма
👩💻 Технический вопрос
Спросил 24 дня назад в HTML от Folasayo
как изменить размер изображения в html?
HTML изображение изменить размер ширина высота
👩💻 Технический вопрос
Спросил 24 дня назад в HTML Эми
Как я могу изменить размер значка погоды в формате png, предоставленного в html-адресе
HTML CSS изображение размер стиль
👩💻 Технический вопрос
Спросил 24 дня назад в HTML by Francesca
Как установить атрибут ID в html-файле?
HTML Идентификационный атрибут уникальное имя
👩💻 Технический вопрос
Спросил 25 дней назад в HTML Рикке В.
что такое заголовок
заголовок метаданные HTML-элементы <голова> <мета>
👩💻 Технический вопрос
Спросил 25 дней назад в HTML Елена
нижний колонтитул
нижний колонтитул нижняя часть Веб-разработка HTML
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML by Jess
помогите мне сделать плавные переходы при нажатии на якорную ссылку на странице
HTML якорная ссылка плавная прокрутка анимация смягчение
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML by Jess
заголовок изменяется при прокрутке вниз
HTML CSS заголовок прокрутить JavaScript
👩💻 Технический вопрос
Спросил 25 дней назад в HTML Розимари
как использовать элемент span
HTML пролетный элемент встроенный контейнер CSS стиль текста
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML by Patricia Danielle
эффект наведения для изображения
HTML CSS JavaScript эффект наведения изображение
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML Джейкоб
Сделай мне код для рулетки
HTML CSS JavaScript колесо рулетки анимация
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML Джейкоб
Как сделать панель поиска с помощью html, css, json и javascript
HTML CSS JSON JavaScript панель поиска
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 25 дней назад в HTML by Jacob
Напишите мне код для кнопки «Мне нравится», которая переключается между «нравится» и «не нравится» при нажатии.
HTML JSON JavaScript кнопка лайк переключить
👩💻 Технический вопрос
Спросил 25 дней назад в HTML Амрита
как подчеркнуть заголовок
HTML подчеркнуть заголовок теги
👩💻 Технический вопрос
Спросил 26 дней назад в HTML by Emer
как перемещать контент в разные столбцы по горизонтали в html
HTML CSS столбцы макет дизайн
👩💻 Технический вопрос
Спросил 26 дней назад в HTML Эмер
как подключить html файл к js?
HTML JavaScript тег скрипта подключение
👩💻 Технический вопрос
Спросил 26 дней назад в HTML by Emer
как подключить html-страницу к css-странице?
HTML CSS тег ссылки головная секция стиль.
👩💻 Технический вопрос
Спросил 26 дней назад в HTML от Katusiime
как добавить кнопку в мой код
HTML CSS кнопка стиль
👩💻 Технический вопрос
Спросил 26 дней назад в HTML by Victoria
Как сделать h2 на двух строках (разрыв строки) двумя разными цветами?
HTML CSS h2 Разрыв строки цвет
👩💻 Технический вопрос
Спросил 26 дней назад в HTML Елена
как кодировать эмодзи
HTML эмодзи Юникод коды символов
👩💻 Технический вопрос
Спросил 26 дней назад в HTML by Alona
как создать структуру HTML
HTML теги состав веб-страница
👩💻 Технический вопрос
Спросил 26 дней назад в HTML Эмер
что означает
?УС яснофикс контейнер высота поплавок
👩💻 Технический вопрос
Спросил 26 дней назад в HTML по Emer
как поместить содержимое в столбцы в html?
HTML CSS столбцы отображать гибкий
👩💻 Технический вопрос
Спросил 26 дней назад в HTML Вера
как я могу добавить ссылку на изображение в свой код?
HTML тег изображения атрибут источника альтернативный атрибут доступность
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 26 дней назад в HTML Вера
я хочу добавить изображение в свой проект
HTML тег изображения CSS стиль
👩💻 Технический вопрос
Спросил 26 дней назад в HTML Рикке В.
кнопка отображения
HTML CSS кнопка стиль внешний вид
👩💻 Технический вопрос
Спросил 26 дней назад в HTML от Mehregan
как я могу загрузить картинку на sandcodbox?
HTML КодПесочница загрузка изображения тег img
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.js Рубин Идти .NET
Как сделать текст жирным в CSS
Последнее обновление: 9 апреля 2023 г.
IN — CSS
В этом уроке мы покажем вам, как сделать текст жирным в CSS, чтобы структурировать веб-сайт, мы иногда хотим привлечь внимание разработчиков к чему-то важному. Это можно сделать разными способами.
Самый простой способ — сделать толщину шрифта текста, который вы хотите выделить жирным шрифтом.
Пошаговое руководство о том, как сделать текст жирным в CSS: —
Атрибут font-weight можно использовать для выделения текста жирным шрифтом. Толщина шрифта определяется CSS-атрибутом font-weight (или жирностью).
Выбранное в данный момент семейство шрифтов определяет доступные веса. Вот пример того, как использовать CSS, чтобы сделать текст жирным.
<голова> <название> <стиль> п{ размер шрифта: 15px; } <тело>Это обычный полужирный шрифт.
Это полужирный шрифт
Это более светлый шрифт
Это более жирный шрифт
Этот шрифт имеет вес 100.
Этот шрифт имеет вес 200.
Этот шрифт имеет вес 300.
Этот шрифт имеет вес 400.
Этот шрифт имеет вес 500.
Этот шрифт имеет вес 600.
Этот шрифт имеет вес 700.
Этот шрифт имеет вес 800.
Этот шрифт имеет размер 900 вес.
- Сначала мы набираем , который сообщает веб-браузеру, в какой версии HTML написан файл.
- С другой стороны, элемент используется для обозначения начала HTML-документа.
- Тег теперь содержит информацию о веб-страницах. В этом теге используется элемент
, позволяющий указать заголовок веб-страницы. К парным тегам относятся теги<head> и<title>. В результате оба имеют завершающие теги</head> и .- Наконец, элемент используется для определения содержимого веб-страницы. Здесь вы будете писать все содержимое веб-сайта. Свойство font-weight добавляется первым.
- Толщина шрифта: в большинстве случаев полужирный шрифт будет использоваться по умолчанию! Однако у вас есть немного больше гибкости, как вы можете ожидать.
- Вместо полужирного и обычного шрифта вы можете использовать приведенный выше код, чтобы указать число для точной настройки уровня жирности, отображаемого в вашем тексте.
- Тег
Я хочу, чтобы он отображал количество лайков рядом с кнопкой «Нравится». Я хочу, чтобы он использовал html, json и javascript. 
css
Из этой статьи вы узнаете, как сделать текст полужирным в CSS.