Жирный текст в css: font-weight

Содержание

font-weight | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Версии CSS

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
  dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(«elementID»). style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Курсив и жирный шрифт CSS — учебник CSS

Чтобы сделать шрифт жирным в CSS либо задать ему курсивное начертание, вам пригодятся такие свойства, как font-weight и font-style. Ниже мы разберемся, какие значения могут быть использованы для этих свойств.

Жирный шрифт в CSS: свойство font-weight

Управлять жирностью шрифта в CSS можно с помощью значений свойства

font-weight:

bold	Полужирный шрифт
normal	Обычный шрифт
bolder	Более жирный шрифт, чем у родителя
lighter	Менее жирный шрифт, чем у родителя
inherit	Наследует значение родителя
Числовое значение от 100 до 900	От очень тонкого до очень жирного шрифта

Пример записи:


p {
font-weight: bold;
}

Насыщенность шрифта вы можете регулировать с помощью ключевых слов bold (полужирное), normal (обычное начертание), bolder (более жирное, чем у родителя), lighter (менее жирное, чем у родителя), inherit (такое же, как у родителя), а также используя числовые значения 100, 200, 300, 400, 500, 600,

700, 800 и 900, настраивая жирность шрифта от самого тонкого до самого плотного.

Примечание: числовые значения от 100 до 900, означающие толщину шрифта, сработают только в том случае, если у шрифта, с которым вы работаете, предусмотрены эти варианты начертания. Данные значения используются в основном с веб-шрифтами, о которых мы говорили в первой подглаве.

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства font-style:

italic	Курсивный шрифт
oblique	Наклонный шрифт
normal	Обычный шрифт
inherit	Наследует значение родителя

Пример записи:


p {
font-style: italic;
}

Чтобы сделать курсив в CSS, используйте значение italic. Второе значение в таблице – oblique – означает наклонное начертание и отличается от курсива тем, что все символы с обычным начертанием просто наклоняются вправо, в то время как курсив – это отдельно созданный вариант начертания шрифта, похожий на рукописный.

Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

font-weight — CSS | MDN

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

font-weight: normal;
font-weight: bold;


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;


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 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

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 {
  font-weight: bold;
}


div {
 font-weight: 600;
}


span {
  font-weight: lighter;
}

Result

BCD tables only load in the browser

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

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

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

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

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

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

Обычный текст. Жирный текст. Жирный текст strong.

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

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

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

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

Пример жирного текста. Пример текста с жирным словом.

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

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

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

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

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

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

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

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Обычный текст с жирным выделением по центру.

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

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

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

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

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

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

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

strong {
    font-weight: bold;
}

strong { font-weight: bold; }

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

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

Делаем текст жирным с помощью CSS и HTML

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

Тег ;
Тег ;
CSS-свойство font-weight.

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

Жирный текст: тег

Тег b HTML применяется следующим образом:

<b>Конструктор сайтов "Нубекс"</b>

Для тега  обязательно наличие закрывающего , и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения важных фраз, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги , и помечают его именно как важный.

Используется тег strong аналогичным образом:

<strong>Конструктор сайтов "Нубекс"</strong>

Вы можете заметить, что внешне применение тегов и совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью «жирности» шрифта? В таких случаях используется CSS-свойство font-weight. Применяется оно следующим образом:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Жирный текст с помощью CSS - "Нубекс"</title>
  <style>
   .nubex1 {
    font-weight: bold;
   }
   .nubex2 {
    font-weight: bolder;
   }
   .nubex3 {
    font-weight: 600;
   }
  </style>
 </head>
 <body>
  <center>
   <p>Наши сайты - это, действительно, <span>огромный шаг</span> в веб-разработке.</p>
   <p>Мы делаем по-настоящему <span>качественные</span> сайты.</p>
   <p>Доверьтесь нам, и мы вас <span>не подведем</span>.</p>
  </center>
 </body>
</html>

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

Как использовать жирный шрифт HTML?

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML-тег	Когда применяется
<b>	Используется для вывода полужирного шрифта HTML, имеющего ключевое значение.
<em>	Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.
<h2>, <h3>, <h4>, <h5>, <h5> и <h6>	Эти теги используются для вывода подзаголовков различных уровней.
<mark>	Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях.
<strong>	Этот элемент отражает важность и ценность обрамленного в него контента.

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

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

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

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

Данная публикация является переводом статьи «HTML Bold» , подготовленная редакцией проекта.

Можно ли добавить жирный шрифт и курсив в одну строку — это css?

В настоящее время я видел, что вы можете сделать что-то вроде:

body{
font-weight:bold;
font-style:italic;
}

Есть ли способ это сделать?..

body{
font: bold italic???
}

css
Поделиться Источник Blynn 08 мая 2013 в 19:20
2 ответа
htmlText не показывает жирный или курсивный шрифт
Итак, у меня есть актив MovieClip с динамическим текстовым полем внутри него. Я экспортирую свой .fla как .swc для использования в Flash Builder 4 и создаю экземпляры актива с кодом, динамически заполняя текст из XML. Моя проблема заключается в том, что, хотя у меня включен htmlText, жирный шрифт…
Как установить жирный шрифт и курсив на UILabel из iPhone/iPad?
Как установить жирный шрифт и курсив на UILabel из iPhone/iPad? Я обыскал форум, но мне ничего не помогло. Кто-нибудь может мне помочь?

5

Да, с помощью правила сокращенного шрифта CSS .
Формальный синтаксис: [ [ <‘font-style’> || || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | подпись | значок | меню | окно сообщения | маленькая подпись / строка состояния
См. также: http://www.w3.org/TR/CSS2/fonts.html#шрифт-стенография
Некоторые примеры:
p { font: 12px/14px sans-serif } p { font: 80% sans-serif } p { font: x-large/110% "New Century Schoolbook", serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy }
Поделиться j08691 08 мая 2013 в 19:22

0

Да, это так, как вы и сказали, используя font :
p { font: bold italic large Palatino, serif }
Из документов:
Свойство font , за исключением описанного ниже, является сокращенным свойством для установки font-style , font-variant , font-weight , font-size , line-height и font-family в одном и том же месте в таблице стилей.
Поделиться Stefan 08 мая 2013 в 19:23
Похожие вопросы:

Как применить жирный и курсивный шрифт к NSAttributedString?
Я пытаюсь разобрать свою собственную строку HTML в NSAttributedString для рендеринга в UITextView. Итак, когда строка появляется как таковая: это должно быть как жирным…

Применять подчеркивание, жирный шрифт, курсив и т. д. на email орган, созданный в скрипте Гугл
Могу ли я узнать, как вставить полужирный шрифт, подчеркивание, курсив, изменение шрифтов word для email тел в Google Script? Вот мой пример, это email, я хотел бы вставить различный размер шрифта,…

UITextView Жирный Шрифт iphone sdk
я пытаюсь выделить жирным шрифтом / курсивом текст, но я использую этот код, чтобы выделить жирным шрифтом мой шрифт, но когда я нажимаю жирную кнопку целиком, UITExtView переходит в жирный, но я…

htmlText не показывает жирный или курсивный шрифт
Итак, у меня есть актив MovieClip с динамическим текстовым полем внутри него. Я экспортирую свой .fla как .swc для использования в Flash Builder 4 и создаю экземпляры актива с кодом, динамически…

Как установить жирный шрифт и курсив на UILabel из iPhone/iPad?
Как установить жирный шрифт и курсив на UILabel из iPhone/iPad? Я обыскал форум, но мне ничего не помогло. Кто-нибудь может мне помочь?

Как сделать жирный шрифт тонким, используя CSS, Javascript или jQuery?
Если я использую шрифт и у меня нет полужирной версии, я мог бы использовать тег text-shadow , добавив контур, чтобы сделать тонкий шрифт более жирным. Но у меня есть только жирный шрифт, и я хочу…

Установите полужирный шрифт и курсив для Слова в itext pdf
Как установить жирный шрифт и курсив для Слова в itext pdf. например: Привет , Мир в одном предложении пожалуйста, дайте мне совет.

Как применить жирный шрифт и курсив к диапазону NSMutableAttributedString?
В последнее время я пытаюсь применить комбинации NSFontAttributes к NSMutableAttributedString, и я просто не могу найти подробное объяснение того, как это сделать, не удаляя другие атрибуты. Я искал…

Удалите жирный шрифт, курсив и подчеркивание из UIWebView в iOS
Я не могу удалить жирный шрифт, курсив и подчеркивание из UIWebView. Почему это невозможно? CustomWebView.h: #import <UIKit/UIKit.h> @interface CustomUIWebView : UIWebView @end…

Синтаксис телеграммы markdown: жирный *and* курсив? (Сентябрь 2018 года)
Глядя на страницу Telegram “Markdown Syntax” Wiki , должно быть относительно легко создать текст, выделенный жирным шрифтом и курсивом . Там написано, что *this is in italic* and _so is this_ **this…
CSS свойство font-weight

Пример
Установить различную толщину шрифта для трех абзацев:
p.normal {
font-weight: normal; нормальный;
} Толщина
стр. {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
Попробуй сам »
Определение и использование
Свойство font-weight устанавливает, насколько толстые или тонкие символы в тексте должны отображаться.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Объект
font-weight 2,0 4,0 1,0 1,3 3,5
Синтаксис CSS
font-weight: нормальный | полужирный | полужирный | светлее | номер | начальный | наследование;
Стоимость объекта
.
Значение Описание Играй
нормальный Определяет нормальные символы.Это значение по умолчанию Играй »
полужирный Определяет толстые символы Играй »
смелее Определяет более толстые символы Играй »
зажигалка Определяет более светлые символы Играй »
100
200
300
400
500
600
700
800
900 Определяет от тонких до толстых символов.400 соответствует обычному значению, а 700 соответствует полужирному шрифту Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный Играй »
унаследовать Наследует это свойство от своего родительского элемента. Читать про унаследовать
Связанные страницы
Учебник
CSS: Шрифт CSS
Ссылка CSS: свойство шрифта
Ссылка на HTML DOM: свойство fontWeight

CSS свойство зазора

Пример
Установите зазор между строками и столбцов равным 50 пикселей:
.сетка-контейнер {
пробел: 50 пикселей;
}
Попробуй сам »
Определение и использование
Зазор Свойство определяет размер промежуток между строками и столбцов. Это сокращение от следующие свойства:
Примечание: Свойство gap ранее называлось Козлова .
Значение по умолчанию: нормальный нормальный
Унаследовано: нет
Анимируемое: да.Читать о animatable Попробуй
Версия: Модуль выравнивания бокса CSS, уровень 3
Синтаксис JavaScript: объект .style.gap = «50px 100px» Попробуй
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Объект
разрыв (в несколько столбцов) 66 16 61 Не поддерживается 53
зазор (в сетке) 66 16 61 10.1 53
разрыв (в Flexbox) 84 84 63 Не поддерживается 70
Синтаксис CSS
Стоимость объекта
Значение Описание Играй
междурядье Устанавливает размер зазора между строками в макете сетки Играй »
колонна-зазор Устанавливает размер зазора между столбцами в макете сетки Играй »
Другие примеры
Пример
Установите зазор между строками на 20 пикселей и столбцами на 50 пикселей:
.сетка-контейнер {
gap: 20px 50px;
}
Попробуй сам »
Связанные страницы
Учебник
CSS: Макет сетки CSS
Ссылка CSS: свойство row-gap
Ссылка CSS: свойство column-gap

HTML: 3 способа сделать текст полужирным в CSS
В этом руководстве вы научитесь выделять текст полужирным шрифтом в CSS тремя способами.
В большинстве случаев вы будете использовать ключевое слово полужирный, чтобы выделить шрифт жирным шрифтом с помощью свойства font-weight .Но если вы хотите применить разную степень жирности, вы можете использовать число, кратное 100.
Кроме того, вы можете использовать встроенный CSS для элементов и можете использовать элементы и , чтобы выделить текст жирным шрифтом. параграф. Ниже приведены примеры:
1. Использование свойства CSS font-weight в разделе Head
Для font-weight вы указываете число, определяющее жирность шрифта: нормальный, полужирный, полужирный, светлее или кратные 100 от 100 до 900 , 400 соответствует нормальному.Более жирный и светлый оттенки относятся к родительскому элементу.
Синтаксис для font-weight
font-weight: нормальный | полужирный | полужирный | светлее | число | начальный | наследование;
Как указать font-weight
font-weight: 700; font-weight: жирный; / * то же, что 700 * / шрифт: нормальный; / * то же, что и 400 * / font-weight: светлее; / * относительно родительского элемента * /
CSS for Class in Head Section

HTML

Этот абзац полностью выделен жирным шрифтом.

Вывод
Этот абзац полностью выделен жирным шрифтом.
2. Использование элемента
Поместите элемент между элементом абзаца, чтобы выделить определенную часть абзаца жирным шрифтом.
HTML

Некоторая часть абзаца выделена жирным шрифтом .

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

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

Вывод
Некоторая часть абзаца выделена жирным шрифтом с использованием сильный элемент .
Полный пример
<стиль> .жирный текст { font-weight: жирный; }
Примеры: выделение текста жирным шрифтом в CSS

Использование класса CSS

Этот абзац полностью выделен жирным шрифтом.

Использование элемента b

Некоторая часть абзаца выделена жирным шрифтом .

Использование сильного элемента

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

Вывод
Как показано на избранном изображении в этой статье.
См. Также:
font-weight — CSS: Cascading Style Sheets
Свойство CSS font-weight устанавливает насыщенность (или полужирность) шрифта.Доступные веса зависят от установленного в настоящее время семейства шрифтов .
шрифт: нормальный; font-weight: жирный; font-weight: светлее; font-weight: жирнее; 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; вес шрифта: наследовать; font-weight: начальный; вес шрифта: вернуться; font-weight: не установлено;
Свойство font-weight задается с использованием любого из значений, перечисленных ниже.
Значения
нормальный
Нормальная толщина шрифта. То же, что и 400 .
полужирный
Полужирный шрифт. То же, что 700 .
зажигалка
На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
жирный
На один относительный вес шрифта тяжелее родительского элемента.Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
<номер>
<число> , значение от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или полужирнее), чем более низкие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе «Сопоставление общих имен весов» ниже.
В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например.г. 451) будет преобразовано в одно из этих значений для неизменяемых шрифтов с использованием системы весов Fallback.
CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты, которые могут использовать этот гораздо более мелкий диапазон веса шрифта.
Резервные веса
Если точный вес недоступен, то для определения фактически визуализированного веса используется следующее правило:
Если заданный целевой вес находится между 400 и 500 включительно:
Найдите доступные веса между целевым значением и 500 в порядке возрастания.
Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
Если совпадений не найдено, ищите доступные веса больше 500 в порядке возрастания.
Если задан вес меньше 400 , ищите доступные веса меньше целевого в порядке убывания. Если совпадений не найдено, ищите доступные веса, превышающие целевой, в порядке возрастания.
Если задан вес больше 500 , ищите доступные веса больше целевого значения в порядке возрастания.Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
Значение относительных весов
Если указано более светлый или более жирный , на приведенной ниже диаграмме показано, как определяется абсолютный вес шрифта элемента.
Обратите внимание, что при использовании относительного веса учитываются только четыре веса шрифта — тонкий (100), нормальный (400), полужирный (700) и жирный (900). Если у семейства шрифтов больше доступных весов, они игнорируются при расчете относительного веса.
Унаследованное значение полужирный зажигалка
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 примерно соответствуют следующим общим названиям весов (см. Спецификацию OpenType):
Значение Общее название массы
100 Тонкий (волосяной покров)
200 Extra Light (Ультра легкий)
300 Свет
400 Обычный (Обычный)
500 средний
600 Полужирный (Demi Bold)
700 Полужирный
800 Extra Bold (Ультра жирный)
900 Черный (тяжелый)
950 Extra Black (Ультра-черный)
Вариативные шрифты
Большинство шрифтов имеют определенный вес, который соответствует одному из чисел в отображении имени общего веса.Однако некоторые шрифты, называемые вариативными шрифтами, могут поддерживать диапазон весов с более или менее мелкой детализацией, и это может дать дизайнеру гораздо более точную степень контроля над выбранным весом.
Для шрифтов с переменной шириной TrueType или OpenType вариант «wght» используется для реализации различной ширины.
Для работы приведенного ниже примера вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000.
HTML
<заголовок> Вес .… было бы нехорошо встретить мегалозавра, длиной около сорока футов, который ковыляет, как слоновая ящерица, по Холборн-Хилл.
CSS
@ font-face { src: url ('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf'); семейство шрифтов: 'MutatorSans'; стиль шрифта: нормальный; } этикетка { шрифт: 1rem моноширинный; белое пространство: nowrap; } .container { максимальная высота: 150 пикселей; переполнение-у: авто; } .образец { текст-преобразование: прописные буквы; шрифт: 1.5rem 'MutatorSans', без засечек; }
html, body { макс-высота: 100vh; максимальная ширина: 100vw; переполнение: скрыто; } тело { дисплей: гибкий; flex-direction: столбец; } header { нижнее поле: 1,5 бэр; } .container { flex-grow: 1; } .container> p { margin-top: 0; нижнее поле: 0; }
JavaScript
пусть weightLabel = document.querySelector ('label [for = "weight"]'); let weightInput = document.querySelector ('# вес'); пусть sampleText = document.querySelector ('. образец'); function update () { weightLabel.textContent = `вес шрифта: $ {weightInput.value};`; sampleText.style.fontWeight = weightInput.value; } weightInput.addEventListener ('ввод', обновление); Обновить();
Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение веса шрифта , равное 100 (тонкие / тонкие) или 200 (сверхлегкие), особенно если шрифт имеет низкую контрастность цвета. .
Установка толщины шрифта
HTML
Алисе стало очень надоедать сидеть рядом с сестрой на банка, и от того, что ей нечего делать: раз или два она заглянула в книга, которую читала ее сестра, но в ней не было ни картинок, ни разговоров на «а что толку от книги», - подумала Алиса, - без картинок или разговоры? " Я тяжелый Я легче
CSS
п { font-weight: жирный; } div { font-weight: 600; } охватывать { font-weight: светлее; }
Результат
Таблицы BCD загружаются только в браузере
CSS Bold: A Guide to Using Font-Weight
Чтобы создать эффект полужирного текста CSS, необходимо использовать свойство font-weight.Свойство font-weight определяет «вес» шрифта или его жирность. Вы можете использовать ключевые слова или числовые значения, чтобы указать CSS, насколько жирным должен быть текст.
Как разработчики, собирая верстку веб-сайта, мы иногда хотим привлечь к чему-то внимание. Есть несколько способов сделать это. Самый простой способ — увеличить font-weight текста, который вы хотите выделить. Это относится к выделению текста жирным шрифтом.
В этой статье мы поговорим о font-weight, о том, как его установить, и проиллюстрируем различные возможные значения этого свойства.
CSS Bold: Руководство
Свойство font-weight устанавливает, как жирный текст должен отображаться на экране. Вы можете использовать ключевые слова или числовые значения, чтобы указать CSS, каким жирным шрифтом должен отображаться конкретный набор текста.
Найди свой учебный лагерь

repl.it <стиль> тело { семейство шрифтов: 'Arial'; размер шрифта: 3rem; } охватывать { размер шрифта: 1,5 бэр; } p: nth-child (1) { шрифт: нормальный; } p: nth-child (2) { font-weight: жирный; } p: nth-child (3) span { font-weight: жирнее; } p: nth-child (4) span { font-weight: светлее; } p: nth-child (5) { font-weight: 100; } p: nth-child (6) { font-weight: 200; } p: nth-child (7) { font-weight: 300; } p: nth-child (8) { font-weight: 400; } p: nth-child (9) { font-weight: 500; } p: nth-child (10) { font-weight: 600; } p: nth-child (11) { font-weight: 700; } p: nth-child (12) { font-weight: 800; } p: nth-child (13) { font-weight: 900; }
Привет, мир! - Нормальный

Привет, мир! - полужирный

Привет, мир! - жирнее
& nbsp; & nbsp; & nbsp; & nbsp; - ребенок смелее родителя

Привет, мир! - Зажигалка
& nbsp; & nbsp; & nbsp; & nbsp; - ребенок легче родителя

Привет, мир! - 100

Привет, мир! - 200

Привет, мир! - 300

Привет, мир! - 400 "нормально"

Привет, мир! - 500

Привет, мир! - 600

Привет, мир! - 700 "полужирный"

Привет, мир! - 800

Привет, мир! - 900

Более жирный и светлый в данном контексте означает, насколько жирным или светлым они являются по отношению к их родительскому элементу. Поэтому, когда мы делаем дочерний элемент более жирным, он будет на один относительный шрифт темнее, чем их родительский — то же самое касается и светлее.
Относительный вес шрифта Фактический вес шрифта
тонкий 100
нормальный 400
полужирный 700
жирный 900
Итак, мы могли бы использовать свойство font-weight: bold, чтобы установить font-weight для абзаца текста равным 800.Когда ребенок на один относительный вес смелее своего родителя, он использует приведенную выше таблицу, чтобы выяснить, насколько смелее его сделать.
Предположим, мы разрабатываем веб-сайт для The Seattle Stamp Club, местного общества почтовых марок. Общество почтовых марок попросило нас выделить полужирным шрифтом заголовок About Us на странице About своего веб-сайта. Это привлечет внимание посетителя к заголовку.
Марочный клуб попросил нас добавить на их веб-сайт блок текста с историей клуба. Этот блок текста должен отображаться с обычным начертанием шрифта.Отдельные фразы, которыми клуб хочет привлечь внимание зрителя, должны быть выделены жирным шрифтом.

Seattle Stamp Club, основанный в 2009 году, - это сообщество, которое поощряет и продвигает коллекцию марок. Клуб приветствует всех , от новичков до экспертов, и проводит ежемесячные встречи, на которых участники могут показывать друг другу свои марки, обсуждать последние новости в марках и разделять общие интересы.Сейчас в клубе 250 членов .
<стиль> охватывать { font-weight: жирнее; }
в редакторе кода выше, чтобы увидеть результат нашего кода HTML / CSS.
В нашем HTML-файле мы определили абзац текста, заключенный в теги
. Мы также заключили определенные фразы в теги , которые мы собираемся усилить в нашем коде CSS.
Затем в нашем файле CSS мы определили правило стиля, которое устанавливает толщину стиля шрифта для каждого тега равным полужирным шрифтом .Это означает, что текст, заключенный в любой тег , будет выглядеть более жирным, чем родительский элемент.
Когда мы запускаем наш код, наш абзац отображается с обычным начертанием шрифта, а фразы, заключенные в теги , выделяются жирным шрифтом. В этом примере фразы приветствуют всех и 250 членов заключены в теги .
Полужирный текст CSS с переменными шрифтами
Есть некоторые новые шрифты, доступные нам через последний уровень шрифтов CSS.Они называются переменными шрифтами и могут принимать любое число от 1 до 1000 в качестве веса шрифта. Поддержка браузеров не была полностью реализована до мая 2020 года, поэтому они довольно новые. Если вам нужна дополнительная информация о вариативных шрифтах, ознакомьтесь с этим введением.
Заключение
В этом руководстве мы обсудили свойство CSS font-weight и то, как оно влияет на полужирность наших шрифтов.
Мы узнали, что более жирный и светлый означает один относительный вес шрифта от веса шрифта родительского элемента.На практике, чтобы увидеть, как выглядит текст, мы увидели несколько значений начертания шрифта. Вы будете профессионалом в стилизации шрифтов с использованием начертания шрифта в кратчайшие сроки!
Чтобы узнать больше о кодировании в CSS, прочтите наше руководство по изучению CSS. Вы можете прочитать наше руководство о том, как сделать полужирным текст в HTML, если вы хотите сделать свой текст полужирным, не полагаясь на CSS.
Как выделить текст жирным шрифтом с помощью CSS?
Мы знаем, что в HTML у нас есть теги и , чтобы сделать содержание жирным.Когда дело доходит до выделения текста жирным шрифтом с помощью CSS, у нас также есть соответствующее свойство, чтобы сделать то же самое.
Мы будем использовать свойство CSS font-weight, чтобы сделать содержимое жирным. У нас есть множество вариантов для установки уровня толщины нашего текста.
normal: Это нормальный шрифт. Это то же самое, что 400, числовое значение по умолчанию для жирности.
жирный: Это жирный шрифт. Это то же самое, что и 700.
более жирный: Устанавливает более жирный шрифт , чем родительский элемент.
светлее: Устанавливает font-weight более легким, чем родительский элемент.
: Значение от 1 до 1000 включительно (в порядке возрастания уровня жирности).
Если указано более светлое или жирное, на приведенной ниже диаграмме показано, как определяется абсолютный вес шрифта элемента.
Родительское значение легче жирнее
100 100 400
200 100 400 100300 900 400
400 100 700
500 100 700
600 400 900
700 400 900
800 700 900
900 700 900
Пример 1: В следующем примере показан простой текст, выделенный жирным шрифтом с использованием свойства CSS font-weight. .
HTML

< html >
< головка >
стиль type = "text / css" >
h3 {
font-weight: 700;
цвет: зеленый;
}
.текст {
font-weight: жирный;
}
стиль >
головка >
< корпус >
корпус > < h3 > Добро пожаловать в компьютерные компьютерщики для компьютерных фанатов h3 > Портал компьютерных наук для вундеркиндов p > body > html >
Вывод:

Пример 2: В следующем примере показано несколько простых текстов, представленных с использованием других свойств font-weight.
HTML

< html >
< корпус >
html
style = "font-weight: bold;
text-decoration: underline;">
Мысль дня
h3 >

Хороший программист - это тот, кто
всегда смотрит в обе стороны

перед пересечением дороги с односторонним движением.
пролет >
p >
корпус >
html >
Вывод:
свойство font-weight
Поддерживаемый браузер:
Google Chrome 2.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.3

CSS - font-weight
CSS - font-weight
font-weight
Вернуться к оглавлению.
Тонкая проблема совместимости: где именно в диапазоне 100-900 светлее начинает генерировать полужирный текст?
font-weight предназначен для установки жирности (жирности) шрифта. нормальный - значение по умолчанию.
Проблема здесь в том, что у самого шрифта должна быть одна или несколько толщин. Если его нет, вы вообще не можете выделить его жирным шрифтом.
Если вам нужен полностью безопасный вес, просто используйте font-weight: bold и принимайте все, что вам дает браузер.
Если вы любитель приключений, вы можете использовать значения 100-900 . Им нужно присвоить девять различных значений веса, от очень легкого до очень жирного.Немногие шрифты поддерживают все девять весов, хотя некоторые поддерживают четыре или пять.
font-weight: 400 должно быть равно нормальному , а 700 равно жирному .
Наконец, есть относительные значения жирнее и светлее , которые делают текст на один шаг жирнее или светлее, чем значение по умолчанию (которое, в свою очередь, зависит от определенного вами абсолютного значения font-weight ).
Тестовый набор
В качестве тестового примера я использую Segoe UI для Windows и Helvetica Neue для Mac. У Segoe UI четыре веса, а у Helvetica Neue пять. Если вы видите только два веса, ваш браузер неправильно обрабатывает font-weight .
font-weight: normal смелее зажигалка
font-weight: жирный смелее зажигалка
font-weight: 100 смелее зажигалка
font-weight: 200 смелее зажигалка
font-weight: 300 смелее зажигалка
font-weight: 400 смелее зажигалка
вес шрифта: 500 смелее зажигалка
font-weight: 600 смелее зажигалка
font-weight: 700 смелее зажигалка
font-weight: 800 смелее зажигалка
вес шрифта: 900 смелее зажигалка
.

Жирный текст в css: font-weight | htmlbook.ru

font-weight | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Курсив и жирный шрифт CSS — учебник CSS

Жирный шрифт в CSS: свойство font-weight

Курсив в CSS: свойство font-style

font-weight — CSS | MDN

Значения

Недоступность заданного значения

Значение относительных весов

Определение веса имени

Интерполяция

Формальный синтаксис

HTML

CSS

Result

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

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

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

Делаем текст жирным с помощью CSS и HTML

Жирный текст: тег <b>

Жирный текст: тег <strong>

Жирный текст при помощи CSS

Как использовать жирный шрифт HTML?

Можно ли добавить жирный шрифт и курсив в одну строку — это css?

2 ответа

Похожие вопросы:

CSS свойство font-weight

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Стоимость объекта

Связанные страницы

CSS свойство зазора

Пример

Определение и использование

Поддержка браузера

Синтаксис CSS

Стоимость объекта

Другие примеры

Пример

Связанные страницы

HTML: 3 способа сделать текст полужирным в CSS

1. Использование свойства CSS font-weight в разделе Head

Синтаксис для font-weight

Как указать font-weight

CSS for Class in Head Section

HTML

Вывод

2. Использование элемента

HTML

Вывод

3. Использование элемента

HTML

Вывод

Полный пример

Примеры: выделение текста жирным шрифтом в CSS

Использование класса CSS

Использование элемента b

Использование сильного элемента

Вывод

См. Также:

font-weight — CSS: Cascading Style Sheets

Значения

Резервные веса

Значение относительных весов

Отображение общих названий весов

Вариативные шрифты

HTML

CSS

JavaScript

Установка толщины шрифта

HTML