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

Как сделать нежирный текст в css

  • автор:

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

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

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

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

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

Конструктор сайтов "Нубекс"

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

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

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

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

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

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

Конструктор сайтов "Нубекс"

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

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

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

    Жирный текст с помощью CSS - "Нубекс" .nubex1 < font-weight: bold; >.nubex2 < font-weight: bolder; >.nubex3  

Наши сайты - это, действительно, огромный шаг в веб-разработке.

Мы делаем по-настоящему качественные сайты.

Доверьтесь нам, и мы вас не подведем.

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

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

Чтобы выделить отдельные слова в предложении жирным начертанием в HTML применяется два элемента:

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

Пример 1. Использование

Чтобы придать жирное начертание длинному тексту, вроде заголовков, удобнее использовать стили, в частности, свойство font-weight. В качестве значения достаточно указать bold (пример 2).

Пример 2. Использование font-weight

См. также

  • font-weight
  • Знакомство с HTML
  • Насыщенность
  • Продвинутая семантика и доступность
  • Свойства шрифта в CSS
  • Семантика строчных элементов

Сделать жирным одно слово в предложении через CSS

Чтобы выделить одно слово из предложения жирным шрифтом средствами HTML нужно использовать тэг Word или Word . Но, все говорят, что нужно оформление полностью делать в CSS. За жирность в CSS отвечает font-weight: . Я пробовал заключать слово в , но он переносит текст за измененным словом на новую строку. Как можно решить проблему?

Отслеживать
задан 6 фев 2016 в 12:53
7 1 1 серебряный знак 4 4 бронзовых знака
не слушайте этих ВСЕХ, это глупость. используйте strong , он для того и придуман.
6 фев 2016 в 13:53
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
7 фев 2016 в 6:06

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Поместить его в тег span :

span.bold
Привет, мир!

Отслеживать
ответ дан 6 фев 2016 в 12:56
5,542 3 3 золотых знака 21 21 серебряный знак 41 41 бронзовый знак

Иногда семантика неотделима от оформления — в таком случае просто используйте или .

Если же оформление как-то связано с семантикой, то жирность можно «навесить» на любой семантический тэг. К примеру, на если вам надо выделять жирным аббревиатуры. Или на если вам нужно выделить сочетание клавиш.

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

foo span.selected-word

Ну и по поводу . Этот тэг использовать также можно, если задать ему стиль display: inline . Но я бы не рекомендовал так делать, поскольку семантика тут точно нарушится (div — это раздел в тексте, а никак не слово).

font-weight

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

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter . Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontWeight=»900″

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

Значения свойства

Значение Описание
normal Определяет стандартное написание символов.
bold Задает жирное начертание символов в тексте.
bolder Тоже самое, что и bold.
lighter тоже самое, что и normal.
100
200
300
400
500
600
700
800
900
Определяет толщину шрифта по заданному значению, от 0 до 500 — стандартное начертание шрифта, от 600 до 900 — жирное начертание.
inherit Указывает, что значение наследуется от родительского элемента.

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

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