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

Обновлено: 04.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вариант на jQuery:

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

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

Вариант на jQuery:

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

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

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

Данные об измененном масштабе сохраняются в Яндекс.Браузере . При повторном открытии страница будет отображаться в выбранном вами масштабе.

Чтобы удалить настройки масштаба для отдельных страниц:

Горячие клавиши и жесты мыши для изменения масштаба

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

Внимание. Если вы пользуетесь однокнопочной мышью в macOS, все жесты нужно выполнять, удерживая клавишу Ctrl и кнопку мыши.

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

При нажатой клавише Ctrl прокрутите колесо мыши вперед.

При нажатой клавише Ctrl прокрутите колесо мыши назад.

Шрифт

Чтобы задать общий для всех страниц шрифт:

Определите, какие шрифты и какого размера необходимо использовать.

Чтобы увеличить размер шрифта:

На странице Настройки шрифтов в блоке Размер шрифта передвиньте ползунок вправо.

Нечеткий, бледный или ломаный шрифт

Отключите сглаживание шрифтов ClearType в настройках Windows.

Выберите Система и введите в поисковой строке Настройка текста ClearType .

Если у вас установлена программа GDIPP, отключите ее на время и проверьте, как отображаются шрифты.

Отключите глобальную функцию сглаживания FXAA в настройках видеокарты:

В области уведомлений Windows запустите программу управления видеокартой.

Более конкретные рекомендации вы найдете в Руководстве по использованию вашей видеокарты.

В браузерах на основе Chromium шрифты иногда становятся блеклыми. В этом случае попробуйте удалить шрифт Roboto:

Выберите шрифт Roboto и над списком шрифтов нажмите Удалить .

Кодировка

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

Нажмите   → Дополнительно  → Дополнительные инструменты  → Кодировка . Укажите предполагаемую кодировку страницы или выберите из списка пункт Автоматически . Внимание. Для отображения текста на редких языках потребуется установить дополнительные шрифты на компьютер. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Масштаб, шрифт и кодировка - Яндекс.Браузер. Справка","canonical":"https://browser.yandex.ru/help/personalization/display-settings.html","productName":"Яндекс.Браузер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Масштаб

Примечание. Вы можете нечаянно изменить масштаб страницы — например, нажав при прокрутке колесика мыши клавишу Ctrl . Чтобы вернуть нормальный масштаб, в правой части Умной строки нажмите значок .

Нажмите → Настройки → Сайты . В блоке Масштаб страниц выберите из списка нужный Масштаб страницы .

Нажмите значок .

В открывшемся меню нажмите кнопку:

— уменьшить масштаб,

— увеличить масштаб,

— развернуть окно во весь экран.

Чтобы удалить настройки масштаба для отдельных страниц:

Нажмите → Настройки → Сайты .

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

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег является тегом логического форматирования и его суть: "подчеркнуть" важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

Пример как сделать жирный шрифт HTML тегом :

Жирный текст с помощью тега b

В отличии от тега , тег не придает выделенному участку дополнительный логический смысл. Тег является тегом физического форматирования и его предназначение - изменить стиль начертания текста.

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

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

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

Свойство CSS внутри атрибута style:

Что делать, если выделить текст жирным не получается

Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).

Практически в любом текстовом редакторе, а также в браузере есть поддержка следующих горячих клавиш для изменения формата текста: Ctrl + B, Ctrl + i и Ctrl + U. Данные клавиатурные сочетания упрощают форматирования текста тем, что не нужно тянуться за мышкой чтобы выбрать нужную опцию.

Ctrl + B — выделение текста жирным шрифтом

У каждого шрифта есть так называемое жирное (Bold, отсюда и B) сочетание. Выглядит это так:

Для того, чтобы выделить текст нужно выделить нужный кусок и нажать последовательно Ctrl + B. Текста станет жирным.

Ctrl + i — сделать текст курсивом

В начертаниях каждого шрифта есть наклонный вариант или как его еще называют — курсив. Для того, чтобы получить наклонный шрифт в текстовом редакторе, выделите нужный участок текста и нажмите последовательно Ctrl + i (italics). У вас получится как-то так:

Ctrl + U — подчеркнуть текст

Также в любом шрифте обязан быть вариант с подчеркнутым текстом. При написании такого слова внизу появляется черная полоска. Для того, чтобы сделать подчеркнутый текст, например в Word вам необходимо последовательно нажать Ctrl + U на выделенном участке текста. Получится так:

Если кто испытывает трудности по навигации на клавиатуре, то сделал небольшую картинку, которая наглядно показывает где какие кнопки находятся.

Также в текстовом редакторе есть визуальные кнопки для жирного текста, курсива и подчеркивания. Их нужно поискать в меню. Например вот так:

Они могу называться как он английских: B (Bold), I (italic), U (Underline), так и от русских букв: Ж (Жирный), К (курсив), Ч (подЧеркнутый).

Читайте также: