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

Содержание

Делаем текст жирным с помощью 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 — Сделать жирным одно слово в предложении через CSS

Вопрос задан 6 лет 8 месяцев назад

Изменён 6 лет 8 месяцев назад

Просмотрен 6k раза

Чтобы выделить одно слово из предложения жирным шрифтом средствами HTML нужно использовать тэг

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

html
css

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

span. bold {
  font-weight: bold;
}

Привет, <span>мир</span>!

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

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

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

<span>foo</span>
span.selected-word {
  font-weight: bold;
}

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойство пробела в CSS

❮ Назад Полное руководство по CSS Далее ❯

Пример

Установите расстояние между строками и столбцами равным 50px:

. grid-container {
gap: 50px;
}

Попробуйте сами »

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

Свойство gap определяет размер разрыв между строками и столбцами

. Это сокращение от следующие свойства:

row-gap
зазор между столбцами

Примечание: Свойство gap ранее называлось зазор сетки .

Показать демо ❯

Значение по умолчанию:	нормальный нормальный
Унаследовано:	нет
Анимация:	да. Читать о анимированном Попытайся
Версия:	Модуль выравнивания блоков CSS, уровень 3
Синтаксис JavaScript:	объект .style.gap=»50px 100px» Попытайся

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Собственность
зазор (в сетке)	66	16	61	12	53
зазор (во Flexbox)	84	84	63	14,1	70
пробел (в нескольких столбцах)	66	16	61	Не поддерживается	53

Синтаксис CSS

пробел: разрыв строки столбец разрыв ;

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

Значение	Описание	Демо
междурядье	Задает размер промежутка между строками в сетке	Демонстрация ❯
зазор между столбцами	Задает размер промежутка между столбцами в макете сетки	Демонстрация ❯

Дополнительные примеры

Пример

Установите расстояние между строками на 20 пикселей и между столбцами на 50 пикселей:

. grid-container {
gap: 20px 50px;
}

Попробуйте сами »

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

Учебник CSS: CSS Grid Layout

Справочник CSS: свойство row-gap

Справочник CSS: свойство column-gap

❮ Полное руководство по CSS Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.

CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

html — толщина шрифта CSS толще 900?

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

У меня есть панель, которую можно развернуть или свернуть с помощью вертикально центрированной ссылки с символом < или > в качестве текста ссылки. При font-weight: 900 это не сильно выделяется, даже с большим серым фоном вокруг него. Я не хочу использовать изображение, и при текущем размере шрифта оба символа в настоящее время занимают максимальную ширину панели.

Есть ли способ утолщать линию на символах выше 900? Или есть другая альтернатива, которую я мог бы использовать?

Заранее спасибо.

Richard

html
css
жирный

В CSS 3 есть еще один способ сделать размер шрифта жирнее:

 color:#888888;
тень текста: 2px 0 #888888;
интервал между буквами: 2px;
вес шрифта: полужирный;

РЕДАКТИРОВАТЬ:

По какой-то странной причине это выглядит не так красиво, как год назад. Он работает только с текстовой тенью 1px (для большинства распространенных шрифтов другие более толстые шрифты могут по-прежнему работать с 2px). А с текстовой тенью всего 1 пиксель нет необходимости в таком большом межбуквенном интервале.

 цвет:#888888;
тень текста: 1px 0 #888888;
интервал между буквами: 1px;
вес шрифта: полужирный;

Чтобы добавить к ответу Гогуца, вы можете пойти еще смелее, сложив тени текста в сетку. Запятая разделяет каждую строку:

 .extra-bold {
  тень текста: 0px 1px, 1px 0px, 1px 1px;
}

Вы можете использовать text-shadow вместо font-weight

 text-shadow: 0px 1px, 1px 0px, 1px 0px;

К сожалению, толщина шрифта не превышает 900, а указание толщины шрифта по числу зависит от браузера. Лучше всего было бы использовать более толстый шрифт — вы не указали, что используете, но Impact относительно толстый и высокий для своей ширины, но при этом безопасен для Интернета. В противном случае вы можете использовать @font-face для загрузки другого шрифта.

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

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

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

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

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

Зарегистрируйтесь или войдите

Отправить без регистрации

Отправить без регистрации

Свойство пробела в CSS

Пример

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

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

Синтаксис CSS

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

Дополнительные примеры

Пример

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

ВЫБОР ЦВЕТА

КОД ИГРЫ

Лучшие учебники

Основные примеры

html — толщина шрифта CSS толще 900?

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

Рубрики