Как изменить текст на жирный

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью CSS, и узнаем, в чём плюсы этого метода.

Как выделить текст в CSS

Определите, какой участок текста необходимо выделить и используйте CSS-свойство font-weight, которое отвечает за толщину шрифта.

Часто встречающиеся значения:

• 400 или normal — обычный шрифт, значение по умолчанию;
• 700 или bold — полужирный шрифт.

Например:

<p class="boldtext">Красота текста — это не только хороший дизайн 
и качественный контент, но и правильная вёрстка текста, 
и единообразие. Под единообразием мы имеем в виду, что редакция выработала общее представление о строчной вёрстке текста 
и придерживается его.</p>

.boldtext {
  font-weight: 700;
}

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

Весь текст, размеченный классом 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. Они делают шрифт жирнее и тоньше, чем текущее или унаследованное значение.

Выделение отдельных предложений и слов

Чтобы выделить отдельные фразы или слова жирным шрифтом, нужные участки текста разметьте отдельными тегами с использованием классов. Например:

<p>Как и многие языки программирования, медиавыражения 
 <span class="bold">поддерживают логические операторы</span>, поэтому мы можем комбинировать выражения.</p>

И затем в стилях пропишите:

.bold {
  font-weight: 700;
}

Теперь все слова, обёрнутые в тег span с классом bold, станут жирными.

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

Эффективно и доступно

Что, если весь жирный текст сразу разметить в файле HTML? Для этого же есть специальные теги <strong> и <b>.

Теги <b> и <strong> используют в особых случаях, при этом важно знать несколько моментов:

• Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят.
• Тег <strong> указывает на важность отмеченного текста и используется для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального.

В каких случаях предпочтительно использовать свойство font-weight:

• Для совместной работы над проектом. Если кто-то из команды захочет изменить стиль текста, ему не придётся искать и изменять каждый элемент HTML. Нужно будет просто изменить стили шрифтов в CSS.
• Для обеспечения доступности. Скринридер при чтении сайта учитывает насыщенность шрифта. Скринридер выделяет слова с тегом <strong> интонационно, в отличие от простого выделения с помощью <b>. Если чтение с интонацией не нужно, а важно лишь расставить визуальные акценты в тексте, то лучше использовать свойство
  font-weight.

Ещё по теме

• Как подключить и оптимизировать нестандартные шрифты
• Как убрать подчёркивание ссылок
• Как сделать список без точек в HTML

Как написать жирным шрифтом?

Традиционно, в среде верстальщиков и компьютерщиков для определения понятия «жирный текст» используется английское слово «Bold» (Болд), в текстовых редакторах эта функция представлена кнопкой с буквой «Ж» (или «B»). Это один из самых используемых и применяемых стилей выделения текста.

Как в телефоне сделать шрифт жирным?

Как форматировать текст письма:

• Откройте Gmail на устройстве Android.
• Нажмите на значок в правом нижнем углу.
• Введите текст письма.
• Дважды щелкните текст, который нужно форматировать.
• Нажмите Форматировать и выберите нужные параметры (жирный шрифт, подчеркивание и т. д.).

Как выделить слово жирным шрифтом?

Выберите «Формат» > «Шрифт» > «Жирный», «Курсив» или «Подчеркивание». Нажмите «Шрифты» на панели инструментов, затем выберите гарнитуру в окне «Шрифты» для выделения текста жирным шрифтом, курсивом или подчеркиванием.

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

Чтобы сделать текст жирным, заключите его в двойные звёздочки. Пример: **жирный текст**. Чтобы сделать текст курсивным, добавьте сразу перед ним и после него по два символа подчёркивания.

Как сделать жирный шрифт на клавиатуре?

Если же для повышения наглядности было решено выделить некоторые словосочетания жирным шрифтом, то и для этого существует удобная альтернатива мыши — Ctrl+B. Часто бывает необходимым, чтобы фраза была набрана заглавными буквами.

Как в Ватсапе жирным шрифтом?

Как сделать жирный шрифт как на айфоне?

Отображение текста с жирным шрифтом на iPhone. Выберите «Настройки» > «Основные» > «Универсальный доступ» > и включите параметр «Жирный шрифт».

Какой тег делает текст жирным?

Теги <strong> и <b> (сокращение от «bold») предназначены для выделения слова или фразы. Отображаются оба тега одинаково, они выделяют текст жирным. Тег <strong> указывает на важность отмеченного текста.

Как сделать текст в сообщении жирным?

Форматирование текста в WhatsApp

Жирный: требует использования символа «*» по обе стороны от выделяемого фрагмента текста (*жирный*); Курсив: требует использования символа «_» по обе стороны от выделяемого фрагмента (_курсив_);

Как правильно называется Жирный шрифт?

Жирный шрифт (англ. bold) — одно из начертаний шрифта. Предназначено для выделения части текста или набора заголовков. Отличается большей насыщенностью линий в сравнении с основным начертанием.

В чем фишка телеграмм?

20 полезных фишек Telegram, которые мало кто знает. Например, как отправлять скрытый текст:

• Для каждого чата можно задать индивидуальную тему
• Часть текста сообщения получится сделать скрытой
• Есть возможность переводить сообщения в переписке
• В качестве визитки удобно использовать свой QR-код

Как сделать красивый шрифт в телеграмме?

Чтобы изменить стиль текста, нужно выделить его — нажать правой кнопкой мыши (если с десктопа) — выбрать опцию форматирования в появившемся меню — выбрать нужный тип шрифта. Также через контекстное меню можно добавить гиперссылку.

Как сделать свой язык в телеге?

Нажмите Start Translating. Кликните Add a new language. Задайте короткое имя для локализации, её название и нативное имя языка. Выберите один из базовых языков, на котором будет основываться перевод, и нажмите Save language.

Что делает сочетание клавиш Ctrl P?

Примечание: На сенсорной клавиатуре нужно нажать клавишу CTRL, чтобы увидеть некоторые сочетания клавиш.Сочетания клавиш в приложении «Карты»

Как сделать выделенный текст?

Нажмите клавиши CTRL+A. Нажмите клавиши CTRL+SHIFT+F8, а затем используйте клавиши со стрелками. Для выхода из режима выделения нажмите клавишу ESC.

Почему шрифт полужирный?

Но и с точки зрения градации в английском, жирное начертание скорее соответствует начертанию black или начертанию heavy — чему-то очень насыщенно жирному. Именно поэтому болду, который в общей шкале жирности не самое жирное начертание, у нас соответствует термин «полужирный».

Как настроить жирность шрифта?

Жирность шрифта определяется при помощи атрибута CSS font-weight, который может принимать следующие значения:

• lighter — светлее
• normal — обычный
• bold — жирный
• bolder — более жирный
• 100..900 — 100 соответствует самому тонкому шрифту; 900 — самому толстому

Как можно изменить шрифт на телефоне?

Откройте на устройстве приложение «Настройки». Найдите и выберите Размер шрифта. Укажите размер шрифта, двигая ползунок влево или вправо.

Как сделать цветной шрифт?

Изменение цвета шрифта:

• Выделите текст, цвет которого требуется изменить.
• На вкладке Главная в группе Шрифт щелкните стрелку рядом с элементом Цвет шрифта, а затем выберите цвет. Для быстрого форматирования текста можно использовать мини-панель инструментов с параметрами форматирования.

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

Выделить текст и нажать нужное сочетание:

• Жирный — Ctrl (Cmd) + B.
• Курсив — Ctrl (Cmd) + I.
• Подчеркнутый — Ctrl (Cmd) + U.
• Зачеркнутый — Ctrl (Cmd) + Shift + X.
• Моноширинный — Ctrl (Cmd) + Shift + M.
• Гиперссылка — Ctrl (Cmd) + K.

Как работать со шрифтом?

6 простых советов по работе с шрифтами:

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

Как изменить текст в телеграмме на телефоне?

В приложении Telegram для Android:

• выделите нужный текст во время набора / редактирования сообщения,
• нажмите на три точки в правом верхнем углу окна,
• выберите нужный стиль.

Как сделать текст полужирным?

Вы выберите текст, который вы хотите сделать полужирным, и сделайте следующее:

• Переместите указатель мыши на мини-панель инструментов над выделенным пунктом Полужирный.
• Нажмите кнопку Полужирный в группе Шрифт на вкладке Главная.
• Введите клавиши CTRL+B.

Как сделать цветной текст в телеграмме?

Как изменить цвет чата в Telegram

Нажмите на кнопку колоризации и откройте «Сообщения»; В строке ввода кодового обозначения оттенка введите #E1FFC6.

Как сделать текст курсивом?

Выделите текст и нажмите кнопку Курсив в появившемся меню. Чтобы сделать это еще быстрее, нажмите клавиши CTRL+I. Команда Курсив является переключателем. Чтобы переключить текст с наклоном на обычный текст, выделите его и нажмите кнопку Курсив (или клавиши CTRL+I).

Как сделать необычный шрифт в Ватсапе?

Как поменять шрифт в WhatsApp?:

• Откройте мессенджер и любую переписку.
• Напишите нужный текст.
• Нажмите на него и удерживайте.
• В открывшемся меню выберите нужный вам шрифт.

Как выделить текст на телефоне?

Произведите долгое нажатие на слово, чтобы выделить его на веб-странице. Перетащите набор ограничителей, чтобы подсветить весь текст, который вы хотите скопировать.

Как написать зачеркнутый текст на телефоне?

Как сделать зачеркнутый текст в различных приложениях на Android? В целом никак, если самое приложение не поддерживает форматирования текста. Но можно попробовать отправить текст с разметкой маркдаун. Для зачеркивания нужно использовать символы ~~ ~~.

Как выделить курсивом в Ватсапе?

Как форматировать сообщения:

• Чтобы выделить текст курсивом, используйте символ подчеркивания по обе стороны текста:
• Чтобы выделить текст жирным шрифтом, используйте символ звёздочки по обе стороны текста:
• Чтобы применить зачёркивание к тексту, используйте символ тильды по обе стороны текста:

Как писать большим шрифтом?

Изменение размера шрифта выделенного текста

Чтобы выделить весь текст в документе Word, нажмите клавиши CTRL+A. На вкладке Главная в поле Размер шрифта выберите нужный размер шрифта.

Как писать скрытым текстом в ТГ?

Перейдите в чат и напишите послание собеседнику. Выделите весь текст или часть, нажмите на выделенный участок правой кнопкой мыши. В появившемся меню выберите «Форматирование» → «Скрытый». Отправьте сообщение собеседнику.

Как форматировать текст в телеграмме?

• Выделите текст
• Нажмите на него правой кнопкой мыши
• В открывшемся меню выберите пункт «Форматирование»:

Как в телеграмме сделать Котик в сети?

Котики — https://t.me/setlanguage/forcatsandkitties. Попугаи — https://t.me/setlanguage/popug.

Какое сочетание клавиш используется для выделения текста жирным?

Ctrl + Shift + A Прописные. Ctrl + Shift + K Строчные. Ctrl + B Жирный шрифт. Ctrl + I Наклонный шрифт.

Как называется не жирный шрифт?

Курси́в (через нем. kursiv из лат. cursiva littera — «беглый почерк»):

Как изменить шрифт на телефоне Ксиоми?

Перейдите Настройки — Расширенные настройки — Регион.

Переходим в приложение «Темы», на нижней панели находим иконку с буквой «Т», тапаем по ней. Выбираем любой шрифт, что пришелся по душе (свой вариант выделил), тапаем по кнопке «Бесплатно скачать», а после «Применить».

Ответить

Is this article up to date?

Is this article up to date?

Другие шрифты

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;

Значения

normal

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

bold

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

lighter

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

bolder

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

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 = 
  <font-weight-absolute>  | (en-US)
  bolder                  | (en-US)
  lighter                 
<font-weight-absolute> = 
  normal             | (en-US)
  bold               | (en-US)
  <number [1,1000]>

Примеры

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 heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Назначение тексту элемента <p> жирного начертания. */
p {
  font-weight: bold;
}

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

/* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. */
span {
  font-weight: lighter;
}

Result

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

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

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

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

BCD tables only load in the browser

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p> 
<p><strong>Жирный текст strong</strong>.</p>

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег <b> задает простое стилистическое выделение слова жирным шрифтом, тогда как <strong> добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно <strong>.

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p style="font-weight:bold">Пример жирного текста.</p>
<p>Пример текста с <span style="font-weight:bold">жирным</span> словом.</p>

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов <p> и <span> указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег <strong>.

Жирный текст на CSS

Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

• bold (жирный) — 700 по умолчанию;
• normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span class="my-bold-font">жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font {
    color: black;
    font-weight: 700; 
 }

Либо можно написать:

. my-bold-font {
    color: black;
    font-weight: bold;
 }

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

strong {
    font-weight: bold;
}

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

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

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

Жирный текст (шрифт) в HTML

Начнем, пожалуй, с классики – чистого языка разметки HTML (я думаю, что вы помните, что HTML – не язык программирования).

В HTML для того, чтобы сделать нужное слово (фразу или целый текст, хотя для больших объемов данных рациональнее использовать CSS. О нем чуть ниже) жирным, существует два тега.

Первый – это тег <b>. Текст, вложенный в него, становится стандартным полужирным. Использование:

<b>Hello, World!</b>

Закрывающий тег обязателен. Не имеет персональных атрибутов, только универсальные, по типу id, class и прочих.

Второй – тег <strong>. Использование:

<strong>Hello, World!</strong>

Закрывающий тег, значение насыщенности (жирности) и атрибуты – все как в предыдущем теге.

Существенное отличие тега <strong> от <b> в том, что первый (<strong>) является элементом логической разметки и используется для указания важности заключенного в него текста, когда как второй (<b>) – элемент физической разметки и просто изменяет внешний вид текста (также заключенного в него).

Чтобы убрать жирность текста, заключенного в один из этих тегов, просто удалите их (эти теги) или воспользуйтесь свойством CSS.

Жирный текст (шрифт) в CSS

В каскадных таблицах стилей (CSS) насыщенность (жирность) текста устанавливается с помощью свойства font-weight. Популярными значениями (на мой взгляд) являются 400 (эквивалент normal, обычный вид текста) и 700 (эквивалент bold, стандартный полужирный).

Пример:

<div class="text">Hello, World!</div>

<style>
	.text {
		font-weight: 700;
	}
</style>

Все допустимые значения свойства находятся в диапазоне от 100 до 900 (включительно) с шагом 100 (100, 200, 300, 400 или normal, 500, 600, 700 или bold, 800 и 900). Некоторые из этих значений могут не дать желаемого результата из-за особенностей используемого шрифта.

Помимо этого, существуют значения bolder и lighter (они задают жирность указанного текста относительно родителя, в большую или меньшую сторону соответственно), а также inherit (указывает на наследование значения от родителя) и initial (установка значения по умолчанию).

Жирный текст (шрифт) в jQuery/JavaScript

Если вы хотите задать некому тексту необходимую жирность с помощью jQuery или JavaScript, то можно пойти двумя путями. Первый – это обернуть текст при его вставке на страницу, используя HTML-теги.

Вариант на jQuery:

<div class="text"></div>

<script>

	$(function() {
		
		$(".text").html("<b>Hello</b>, <strong>World</strong>!");
		
	});

</script>

Аналогичный вариант на JavaScript:

<div class="text"></div>

<script>

	document.addEventListener("DOMContentLoaded", function() {
  
		document.querySelector(".text").innerHTML = "<b>Hello</b>, <strong>World</strong>!";

	});

</script>

Второй – это применить свойство font-weight из CSS с нужным его значением:

Вариант на jQuery:

<div class="text">Hello, World!</div>

<script>

	$(function() {

		$(".text").css({"font-weight": "700"});

	});

</script>

Аналогичный вариант на JavaScript:

<div class="text">Hello, World!</div>

<script>

	document.addEventListener("DOMContentLoaded", function() {

		document.querySelector(".text").style.fontWeight = "700";

	});

</script>

Плюсом, существует метод bold(), который оборачивает переменную (текст) в HTML-тег <b>:

var str = "Hello, World!";

var text = str.bold(); // <b>Hello, World!</b>

Хотя, если верить некоторым источникам, этот метод считается устаревшим и не рекомендуется к использованию.