Как сделать текст жирным?
Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:
Обратите внимание, что в первую очередь сообщает о важности выделенного текста и по совместительству делает текст жирным. Поэтому для обычного по важности, но жирного по виду текста, следует использовать (пример 1).
Пример 1. Использование
Чтобы придать жирное начертание длинному тексту, вроде заголовков, удобнее использовать стили, в частности, свойство font-weight. В качестве значения достаточно указать bold (пример 2).
Пример 2. Использование font-weight
См. также
- font-weight
- Знакомство с HTML
- Насыщенность
- Продвинутая семантика и доступность
- Свойства шрифта в CSS
- Семантика строчных элементов
Тег HTML жирный текст
Тег в HTML используется для выделения фрагмента текста жирным.
HTML тег относится к тегам физического форматирования и делает текст жирным без логического выделения. Изменения начертания шрифта с помощью тега носят стилистический характер.
Для логического выделение важного участка текста жирным шрифтом используйте тег . Если необходимо акцентировать внимание, «подчеркнуть» фрагмент текста — используйте тег .
Все виды выделения текста описаны в статье: Теги форматирования текста в HTML.
Синтаксис
текст выделенный жирнымТег в HTML5
По спецификации HTML5 приоритет использования следует отдавать тегам логического форматирования: теги — для выделения заголовков, тег — для важных фрагментов, тег — для акцентирования внимания, тег — для подсветки текста.
Тег следует использовать, когда характер выделения текста не подходит ни под один HTML тег логического форматирования.
Отображение в браузере
Это обычный абзац обычного продающего или не продающего, а, например, художественного текста на одной из страниц совершенно обычного сайта. А вот эта часть, как вы видите, выделена полужирным шрифтом или жирным, как его еще называют. Выделена не по смыслу, как в случае с тегом strong, обычное стилистическое полужирное форматирование.
Пример использования в HTML коде
Жирный текст с помощью тега b
Это обычный абзац обычного продающего или не продающего, а, например, художественного текста
на одной из страниц совершенно обычного сайта. А вот эта часть, как вы видите, выделена полужирным шрифтом
или жирным, как его еще называют. Выделена не по смыслу, как в случае с тегом strong,
обычное стилистическое полужирное форматирование.
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
by Lebedev
Оцените, насколько полезна эта страница
Эти материалы могут быть вам полезны
Теги форматирования текста в HTMLКак сделать жирный шрифт в HTMLКак правильно писать HTML заголовки для сайтаТеги заголовков — HTML подзаголовкиТег HTML курсив, наклонный текстТег HTML жирный шрифт, логическое выделение текстаТег HTML выделение текста, подсветка фона
Как изменить шрифт по умолчанию в браузере Chrome, Edge и Firefox
Тип Font очень важен при чтении страницы. Некоторые типы шрифтов трудно читать, а некоторые приятные. Если вы хотите изменить тип шрифта для всех веб-сайтов, которые вы открываете в браузере, прочитайте эту статью. Давайте посмотрим, как изменить шрифт по умолчанию в Chrome, Edge & Firefox.
Как изменить шрифт по умолчанию в вашем веб-браузере
Процедуры для изменения шрифта по умолчанию в ваших веб-браузерах были объяснены далее:
Изменить шрифт по умолчанию для Google Chrome
Шрифт по умолчанию для Google Chrome можно изменить через настройки шрифтов в Google Chrome. Процедура для этого заключается в следующем:
Нажмите кнопку с многоточием (три вертикальные точки в правом верхнем углу) и выберите Настройки.
В разделе «Внешний вид» нажмите «Настроить шрифты».
Здесь вы найдете различные типы шрифтов, используемых в вашем браузере Google Chrome, основным из которых является стандартный шрифт.
Измените его тип на тот, который вы предпочитаете, и перезапустите браузер.
Изменить шрифт по умолчанию для Edge
Самое приятное в Edge Chromium — то, что многие его настройки аналогичны настройкам Google Chrome. Процедура изменения шрифта по умолчанию для Edge Chromium выглядит следующим образом:
Нажмите кнопку с многоточием (три точки в правом верхнем углу браузера Edge Chromium) и выберите Настройки.
В списке слева выберите вкладку «Внешний вид».
На вкладке «Внешний вид» последним вариантом будет «Настройка шрифтов». Нажмите на него, чтобы открыть.
Здесь вы найдете различные виды шрифтов, используемых для браузера Edge Chromium, основным из которых является стандартный шрифт. Пожалуйста, измените его тип по мере необходимости.
Изменить шрифт по умолчанию для Firefox
Гораздо проще изменить шрифт по умолчанию в Firefox. Опция присутствует в меню параметров. Процедура для этого заключается в следующем:
Нажмите кнопку «Меню», которая представляет собой три вертикальные полосы в правом верхнем углу страницы браузера, и выберите «Параметры».
На странице «Параметры» вы найдете параметр «Шрифт по умолчанию» в разделе «Язык и внешний вид».
Измените шрифт на один из ваших предпочтений.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка / 5. Количество оценок:
Оценок пока нет. Поставьте оценку первым.
Как сделать жирный текст в CSS
Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.
Как выделить текст в CSS
Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight , которое отвечает за толщину шрифта.
Часто встречающиеся значения:
- 400 или normal — обычный шрифт, значение по умолчанию;
- 700 или bold — полужирный шрифт.
Красота текста — это не только хороший дизайн и качественный контент, но и правильная вёрстка текста, и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста и придерживается его.
.boldtext
���� Красота текста — это не только хороший дизайн и качественный контент, но и правильная вёрстка текста, и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста и придерживается его.
Весь текст, размеченный классом boldtext , станет жирным.
Свойство font-weight может принимать одно из девяти числовых вариантов насыщенности:
- 100: Thin;
- 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).
Все эти числовые значения задают степень толщины шрифта от самого тонкого до самого толстого.
Но в большинстве системных шрифтов есть только два варианта толщины: обычный normal (400) и полужирный bold (700). Поэтому остальные значения свойства используются реже.
Кроме числовых значений, у font-weight есть ещё два относительных значения: bolder и lighter . Они делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.
Выделение отдельных предложений и слов
Чтобы выделить отдельные фразы или слова жирным шрифтом, нужные участки текста разметьте отдельными тегами с использованием классов. Например:
Как и многие языки программирования, медиавыражения поддерживают логические операторы, поэтому мы можем комбинировать выражения.
И затем в стилях пропишите:
.bold
Теперь все слова, обёрнутые в тег span с классом bold , станут жирными.
���� Как и многие языки программирования, медиавыражения поддерживают логические операторы, поэтому мы можем комбинировать выражения
Эффективно и доступно
Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги и .
Теги и используют в особых случаях, при этом важно знать несколько моментов:
- Тег предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят.
- Тег указывает на важность отмеченного текста и используется для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального.
В каких случаях предпочтительно использовать свойство font-weight :
- Для совместной работы над проектом. Если кто-то из команды захочет изменить стиль текста, ему не придётся искать и изменять каждый элемент HTML. Нужно будет просто изменить стили шрифтов в CSS.
- Для обеспечения доступности. Скринридер при чтении сайта учитывает насыщенность шрифта. Скринридер выделяет слова с тегом интонационно, в отличие от простого выделения с помощью . Если чтение с интонацией не нужно, а важно лишь расставить визуальные акценты в тексте, то лучше использовать свойство font-weight .
Ещё по теме
- Как подключить и оптимизировать нестандартные шрифты
- Как убрать подчёркивание ссылок
- Как сделать список без точек в HTML
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
Вот что получится в итоге:
- 7 сентября 2023
Как сделать тёмную тему на сайте
Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .
HTML
Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.
CSS (styles.css):
Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.
body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text
JavaScript (script.js)
Этот код нужен, чтобы переключать тему при нажатии на кнопку:
document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.
- 29 августа 2023
4 способа центрировать текст в CSS
Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.
Метод 1: Flexbox
Flexbox — это один из самых простых и эффективных способов центрирования.
Заворачиваем текст в с классом center-both :
Центрированный текст
.center-both
Метод 2: CSS Grid
HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :
.center-both
Метод 3: позиционирование и Transform
Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А
внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:
.center-both < position: relative; >.center-both p
HTML остается таким же. Вот что получается:
Плохой метод: использование line-height
Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.
.center-both < line-height: 200px; /* Пример высоты */ text-align: center; >Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:
Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.
- 28 августа 2023
Как скруглить рамку. CSS-свойство border-radius
CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.
- 28 июля 2023
CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.
Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.
⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.
Синтаксис
.container
- 14 июля 2023
Как задать позицию и размер элемента. CSS-свойство inset
CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.
Синтаксис
.element
- 13 июля 2023