Как сделать жирный текст (шрифт) в HTML/CSS/jQuery/JavaScript?

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

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

Жирный текст (шрифт) в 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>

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