Как сделать текст полужирным в css
Перейти к содержимому

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

  • автор:

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

Чтобы сделать текст жирным с помощью CSS, тебе нужно установить CSS свойство font-weight в значение bold .

CSS свойство font-weight определяет насколько толстым (жирным) должен быть текст.

p < font-weight: bold; > 
p>This text is bolded.p> 

И вот что у тебя получится.

bold text css example

Ты можешь установить различные значения для свойства font-weight :

  1. Текстовые — normal , bold , bolder
  2. Или числовые — ‘400’, ‘700’, ‘900’
font-weight: normal; font-weight: bold; font-weight: bolder; font-weight: 400; /* То же, что и normal */ font-weight: 700; /* То же, что и bold */ font-weight: 900; 

Теперь ты знаешь, как с помощью CSS свойства font-weight сделать текст жирным и изменить его толщину.

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

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

Обновлено: 2021-02-11 09:33:08 Валентин Сейидов автор материала

Как сделать полужирный шрифт при помощи CSS-свойства font-weight

Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight , которое позволяет вывести полужирное начертание CSS.

Давайте взглянем на следующий пример:

Пример полужирного текста при помощи CSS.

. а также полужирного выделения всего абзаца.

Пример полужирного текста при помощи CSS.
… а также полужирного выделения всего абзаца .

С помощью этого свойства также можно указывать плотность текста. К тому же вы сможете определять текст, который не требуется выделять.

В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS -классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.

Делаем текст полужирным используя тег жирного шрифта в html

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

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега :

Пример полужирного текста при помощи HTML-тега.

. а также полужирного выделения всего абзаца.

Пример полужирного текста при помощи HTML-тега.
. а также полужирного выделения всего абзаца .

HTML-тег — самый быстрый способ вывести текст полужирным.

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

HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.

HTML-тег Когда применяется
Используется для вывода полужирного шрифта HTML , имеющего ключевое значение.
Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.
, , , ,
и

Эти теги используются для вывода подзаголовков различных уровней.
Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях.
Этот элемент отражает важность и ценность обрамленного в него контента.

Элемент следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от до служат для выделения заголовков, акцентирование внимания производится с помощью элемента , важные фрагменты следует выделять элементом , а текст справки можно отметить тегом .

Комбинируем выделение текста с помощью CSS и HTML

Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах .

HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста.

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

Валентин Сейидов автор-переводчик статьи « HTML Bold »

font-weight

Атрибут font-weight позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, «жирностью») .

Как и любой атрибут представления, font-weight может быть использован в виде свойства в CSS стилях, см. CSS font-weight для подробной информации.

Контекст применения

Категории Атрибут представления
Значения normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Анимируемость Да
Нормативный документ SVG 1.1 (2nd Edition)

Значение ключевых слов

  • bold — соответствует значению 700 — полужирное начертание
  • normal — соответствует значению 400 — нормальное начертание
  • bolder и lighter указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.
  • inherit — даёт указание браузеру унаследовать тип начертания от родительского элемента.

Предостережения

Для многих шрифтов доступны только значения 400 и 700 — нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.

Пример

css

p.normal  font-weight: normal; > p.thick  font-weight: bold; > p.thicker  font-weight: 900; > 

html

p class="normal">This is a paragraph.p> p class="light">This is a paragraph.p> p class="thick">This is a paragraph.p> p class="thicker">This is a paragraph.p> 

Элементы

Следующие элементы могут использовать атрибут font-weight .

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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

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

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

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

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

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

 Hello, World!

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

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

 Hello, World!

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

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

Чтобы убрать жирность текста, заключенного в один из этих тегов, просто удалите их (эти теги) или воспользуйтесь свойством 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-тег :

 var str = "Hello, World!"; var text = str.bold(); // Hello, World!

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *