Жирный шрифт через CSS и теги html

Рассмотрим все способы как можно сделать жирный шрифт через html и CSS. Существует два варианта:

  • Через html тег <b> и <strong>
  • Через свойство CSS font-weight

Жирный шрифт через html тег <b> и <strong>

Весь текст заключенный в html теги <b></b> и <strong></strong> будет жирным. Первый тег состоящий из необычной буквы “b” произошло в сокращение от английского слова “bold”.

Разница между двумя тегами визуально отсутствуют. Среди SEO-оптимизаторов бытует мнение, что для поисковых систем <strong></strong> оказывает большее влияние, когда мы хотим выделить ключевое слово.

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

Преобразуется на странице в

Обычный шрифт. Жирный шрифт через тег b

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

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

В CSS есть свойство font-weight, которое отвечает за толщину написание букв.



Синтаксис CSS font-weight

font-weight: bold|bolder|lighter|normal|100..900;

Где

  • bold – жирное значение шрифта (аналог 700)
  • normal (по умолчанию) – нормальное значение шрифта (400)
  • bolder/lighter – шрифт должен быть больше/меньше, чем у родителя
  • inherit – принять значение предка (родителя)

В нашем случае, для жирности шрифта необходимо применить свойство bold для придания шрифту “толщины”.

Например:

<html>
<head>
<style>
.bold{
font-weight: bold;
}
</style>
</head>
<body>
<div class="weight">Текст со свойством font-weight: bold</div>
</body>
</html>

Преобразуется на странице в

Текст со свойством font-weight: bold




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

• Подробное описание свойства CSS border

• Подчеркнутый текст через теги html и свойства CSS

• Курсивный текст через теги html и свойства CSS

• Свойство CSS background

• Фреймы html

• Декларация !important

• Свойство CSS display

• Свойство CSS transform

• Свойство CSS transition

• Зачеркнутый текст html


← Перейти в каталог html уроков и советов

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

Copy Protected by Chetan's WP-Copyprotect.