Как изменить жирность текста html

Could someone tell me what I’m doing wrong?»

«bold» has never been an HTML element («b» is the closest match).

HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can’t see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:

• Want to distinguish headings from other text? Use heading elements («h1» to «h6») and suggest a bold style for them within your CSS («h1, h2, h3, h4, h5, h6 {font-weight: bold;}».

• Want to embolden labels for form fields? Use a «label» element, programmatically associate it with the the relevant «select», «input» or «textarea» element by giving it a «for» attribute matching an «id» attribute on the target, and suggest a bold style for it within your CSS («label {font-weight: bold;»}).

• Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a «fieldset» element, give it a «legend» element, and suggest a bold style for it within your CSS («legend {font-weight: bold;}»).

• Want to distinguish a table caption from the table it captions? Use a «caption» element and suggest a bold style for it within your CSS («caption {font-weight: bold;}»).

• Want to distinguish table headings from table data cells? Use a «th» element and suggest a bold style for it within your CSS («th {font-weight: bold;}»).

• Want to distinguish the title of a referenced film or album from surrounding text? Use a «cite» element with a class («cite class=»movie-title»), and suggest a bold style for it within your CSS («.movie-title {font-weight: bold;}»).

• Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a «dfn» element and suggest a bold style for it within your CSS («dfn {font-weight: bold;}»).

• Want to distinguish some computer code from surrounding text? Use a «code» element and suggest a bold style for it within your CSS («code {font-weight: bold;}»).

• Want to distinguish a variable name from surrounding text? Use a «var» element and suggest a bold style for it within your CSS («var {font-weight: bold;}»).

• Want to indicate that some text has been added as an update? Use an «ins» element and suggest a bold style for it within your CSS («ins {font-weight: bold;}»).

• Want to lightly stress some text («I love kittens!»)? Use an «em» element and suggest a bold style for it within your CSS (e.g. «em {font-weight: bold;}»).

• Want to heavily stress some text, perhaps for a warning («Beware the dog!«)? Use a «strong» element and suggest a bold style for it within your CSS (e.g. «strong {font-weight: bold;}»).

… You get the idea (hopefully).

Can’t find an HTML element with the right semantics to express /why/ you want to make this particular text bold? Wrap it in a generic «span» element, give it a meaningful class name that expresses your rationale for distinguishing that text («<span class=»lede»>Let me begin this news article with a sentence that summarizes it.</span>), and suggest a bold style for it within your CSS («.lede {font-weight: bold;»}. Before making up your own class names, you might want to check if there’s a microformat (microformats.org) or common convention for what you want to express.

Сделать текст насыщенным можно как в разметке, так и в стилях. Рассмотрим, как изменить насыщенность текста с помощью 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

Could someone tell me what I’m doing wrong?»

«bold» has never been an HTML element («b» is the closest match).

HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can’t see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:

• Want to distinguish headings from other text? Use heading elements («h1» to «h6») and suggest a bold style for them within your CSS («h1, h2, h3, h4, h5, h6 {font-weight: bold;}».

• Want to embolden labels for form fields? Use a «label» element, programmatically associate it with the the relevant «select», «input» or «textarea» element by giving it a «for» attribute matching an «id» attribute on the target, and suggest a bold style for it within your CSS («label {font-weight: bold;»}).

• Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a «fieldset» element, give it a «legend» element, and suggest a bold style for it within your CSS («legend {font-weight: bold;}»).

• Want to distinguish a table caption from the table it captions? Use a «caption» element and suggest a bold style for it within your CSS («caption {font-weight: bold;}»).

• Want to distinguish table headings from table data cells? Use a «th» element and suggest a bold style for it within your CSS («th {font-weight: bold;}»).

• Want to distinguish the title of a referenced film or album from surrounding text? Use a «cite» element with a class («cite class=»movie-title»), and suggest a bold style for it within your CSS («.movie-title {font-weight: bold;}»).

• Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a «dfn» element and suggest a bold style for it within your CSS («dfn {font-weight: bold;}»).

• Want to distinguish some computer code from surrounding text? Use a «code» element and suggest a bold style for it within your CSS («code {font-weight: bold;}»).

• Want to distinguish a variable name from surrounding text? Use a «var» element and suggest a bold style for it within your CSS («var {font-weight: bold;}»).

• Want to indicate that some text has been added as an update? Use an «ins» element and suggest a bold style for it within your CSS («ins {font-weight: bold;}»).

• Want to lightly stress some text («I love kittens!»)? Use an «em» element and suggest a bold style for it within your CSS (e.g. «em {font-weight: bold;}»).

• Want to heavily stress some text, perhaps for a warning («Beware the dog!«)? Use a «strong» element and suggest a bold style for it within your CSS (e.g. «strong {font-weight: bold;}»).

… You get the idea (hopefully).

Can’t find an HTML element with the right semantics to express /why/ you want to make this particular text bold? Wrap it in a generic «span» element, give it a meaningful class name that expresses your rationale for distinguishing that text («<span class=»lede»>Let me begin this news article with a sentence that summarizes it.</span>), and suggest a bold style for it within your CSS («.lede {font-weight: bold;»}. Before making up your own class names, you might want to check if there’s a microformat (microformats.org) or common convention for what you want to express.

Is this article up to date?

Is this article up to date?

В этой статье будут рассмотрены способы форматирования текста с помощью различных CSS свойств.

Жирность текста (font-weight)

С первого взгляда свойство font-weight дублирует тег <b>. То есть делает текст жирным. Но не спешите с выводами, потому что это свойство может различать градации жирного. Для этого у него есть несколько значений:

• normal — нормальная жирность шрифта (то есть нет жирного)
• bold — текст будет выделен жирным
• bolder — текст будет жирнее, чем жирность текста у родительского элемента
• lighter — текст будет менее жирным, чем текст у родительского элемента

Приведём пример:

Тише, <span style="font-weight: bold;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Помимо эти названий свойство font-weight может принимать численные значения: 100, 200, 300, 400 и т.д. до 900. Чем больше цифра — тем жирнее текст. Нормальный текст без выделения жирным соответствует цифре 400. Выделенный жирным текст соответствует цифре 700.

Далеко не у всех шрифтов есть весь набор градаций жирного. Обычно используются только два: bold и normal варианты. Поэтому в таких ситуациях какую цифру ни ставь, все равно получишь только 2 варианта жирности. Но через CSS можно подключить шрифты (указать адреса файлов), в которых будет все остальные градации жирности.

Курсив (font-style)

Курсив можно получить с помощью тега <i>. Но ещё и через свойство font-style со значением italic.
Приведём пример:

Тише, <span style="font-style: italic;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.

Чтобы сделать из курсива нормальный шрифт, используйте «font-style: normal;»

Размер шрифта (font-size)

Через CSS свойство font-size можно задать размер шрифта. Это свойство может принимать несколько единиц измерений. Перечислим их в порядке убывания популярности использования:

• px — пикселы,
• % — проценты (от размера шрифта родительского элемента)
• em — высота шрифта элемента (единица — это сто процентов от размера шрифта родительского элемента),
• pt — пункты (по сути пиксели, но в пропорции 12pt = 16px)
• текстовые названия размеров: xx-small, x-small, smal, medium, large, x-large, xx-large
• ex — высота символа х (единица — это сто процентов),

Приведём пример использования. Постараемся сделать примерно одинаковый размер шрифта, используя все возможные единицы измерений:

Тише, <span style="font-size: 18px;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 130%;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 1.3em;">мыши</span>, кот на крыше.
Тише, <span style="font-size: large;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 14pt;">мыши</span>, кот на крыше.
Тише, <span style="font-size: 2.2ex;">мыши</span>, кот на крыше.

Получится такой результат:

Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.
Тише, мыши, кот на крыше.

Красная строка (text-indent)

Наверное, вы уже заметили, что HTML не воспринимает пробелы. То есть если в HTML коде поставить сотню пробелов между словами, а потом открыть этот HTML файл в браузере, то пробелы заменятся на один. Из-за этого и нет возможности сделать красную строку в абзаце. Но на помощь приходит CSS свойство text-indent, которое может сделать этот отступ. Значение этого свойства задаются в пикселях. Приведём пример:

<div style="text-indent: 40px;">
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>

В браузере будет показано так:

Тише, мыши, кот на крыше,
а котята ещё выше.