Css сделать шрифт жирным: Как сделать жирный шрифт в css

24.04.2023 Facebook Twitter LinkedIn Google+ Разное

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

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

  • Тег <b>;
  • Тег <strong>;
  • CSS-свойство font-weight.

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете заметить, что внешне применение тегов <b> и <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) можно задать степень жирности.

Форматирование текста (font-weight, font-style, font-size, text-indent) в HTML

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

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

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

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

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

Тише, <span>мыши</span>, кот на крыше.

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

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

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

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

Курсив (font-style)

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

Тише, <span>мыши</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>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.
Тише, <span>мыши</span>, кот на крыше.

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

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

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

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

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

<div>
   Тише, мыши, кот на крыше,<br>
   а котята ещё выше.
</div>

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

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

Была ли эта статья полезна? Есть вопрос?

Закажите недорогой хостинг Заказать

всего от 290 руб

CSS Bold: руководство по использованию Font-Weight

Кристина Копецки — 29 декабря 2020 г.

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

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

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

Найдите свой матч для буткемпа

  • Career Karma подберет для вас лучшие учебные курсы по технологиям
  • Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Программная инженерия Дизайн Наука о данных Аналитика данных Информационная безопасность Имя

Фамилия

Электронная почта

Номер телефона

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

CSS Bold: руководство

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

Синтаксис свойства CSS font-weight следующий:

 вес шрифта: weightOfFont;

Значение weightOfFont — это вес шрифта, который вы хотите использовать для элемента, к которому применяется стиль.

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

Шкала полужирного шрифта CSS

Представьте, что ваше семейство шрифтов имеет шкалу жирности от 100 до 1000. Чем выше число, тем жирнее шрифт.

Проведите небольшое исследование вашего предпочтительного семейства шрифтов. Это позволит вам быть уверенным, что результат будет таким же легким или жирным, как вы хотели бы на своем сайте. Некоторые семейства шрифтов не используют всю шкалу.

Следующий код иллюстрирует, насколько светлым и насколько темным может стать популярный шрифт под названием «Arial», используя как числа, так и ключевые слова:

 

 <голова>
   <мета-кодировка="utf-8">
   
   repl.it
   <стиль>
     тело {
       семейство шрифтов: «Arial»;
       размер шрифта: 3rem;
     }
 
     охватывать {
       размер шрифта: 1.5rem;
     }
 
     p: n-й ребенок (1) {
       вес шрифта: нормальный;
     }
     p: n-й ребенок (2) {
       вес шрифта: полужирный;
     }
     p:nth-child(3) span {
       вес шрифта: жирнее;
     }
     p:nth-child(4) span {
       вес шрифта: светлее;
     }
     p: n-й ребенок (5) {
       вес шрифта: 100;
     }
     p: n-й ребенок (6) {
       вес шрифта: 200;
     }
     p: n-й ребенок (7) {
       вес шрифта: 300;
     }
     p: n-й ребенок (8) {
       вес шрифта: 400;
     }
     p: n-й ребенок (9) {
       вес шрифта: 500;
     }
     p: n-й ребенок (10) {
       вес шрифта: 600;
     }
     p: n-й ребенок (11) {
       вес шрифта: 700;
     }
     p: n-й ребенок (12) {
       вес шрифта: 800;
     }
     p: n-й ребенок (13) {
       вес шрифта: 900;
     }
 
   
 
 <тело>
   
Привет, мир! -- Обычный

   
Привет, мир! -- Жирный

   
Привет, мир!
     -- Смелее
     

      
      
      
      
     -- ребенок смелее родителя
     

   
Привет, мир! -- Легче
     

      
      
      
      
     -- ребенок легче родителя
     
   

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

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

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

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

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

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

   
Привет, мир! -- 700 'жирный'

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

   
Привет, мир! <диапазон> -- 900

Легче и смелее: что они на самом деле означают?

Главное, на что здесь нужно указать, это то, что «светлее» и «жирнее» — это не дословный перевод. Смелее здесь не означает «смелее, чем жирный».

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

Относительные веса шрифта следующие:

Таким образом, мы могли бы использовать свойство font-weight: bold, чтобы установить вес шрифта абзаца текста равным 800. Когда дочерний элемент на один относительный вес жирнее, чем его родитель, он использует приведенную выше таблицу, чтобы выяснить, насколько жирным шрифт сделать. это.

«Карьерная карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти буткемп. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!»

Венера, инженер-программист в Rockbot

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

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

Пример толщины шрифта CSS

Предположим, мы разрабатываем веб-сайт для The Seattle Stamp Club, местного общества марок. Общество почтовых марок попросило нас сделать О нас направляясь на О страницы их веб-сайта выделены жирным шрифтом. Это привлечет внимание посетителя к заголовку.

Клуб марок попросил нас добавить на их веб-сайт блок текста с историей клуба. Этот блок текста должен отображаться с нормальным размером шрифта. Определенные фразы, на которые клуб хочет обратить внимание зрителя, должны быть выделены жирным шрифтом.

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

 

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

<стиль>
охватывать {
вес шрифта: жирнее;
}

Нажмите на в редакторе кода выше, чтобы увидеть вывод нашего кода HTML/CSS.

В нашем файле HTML мы определили абзац текста, заключенный в теги

. Мы также заключили определенные фразы в теги , которые мы собираемся усилить в нашем коде CSS.

Затем в нашем файле CSS мы определили правило стиля, которое устанавливает вес стиля шрифта для каждого Тег <диапазон> к смелее . Это означает, что текст, заключенный в любой тег , будет отображаться жирнее, чем родительский элемент.

Когда мы запускаем наш код, наш абзац отображается с обычным шрифтом, а фразы, заключенные в теги , выделяются жирным шрифтом. В этом примере фразы приветствует всех и 250 участников заключаются в теги .

Жирный текст CSS с переменными шрифтами

Есть несколько новых шрифтов, доступных для нас через последний уровень шрифтов CSS. Они называются вариативными шрифтами и могут принимать любой число от 1 до 1000 в качестве веса шрифта. Поддержка браузеров не была полностью реализована до мая 2020 года, поэтому они довольно новые. Если вам нужна дополнительная информация о вариативных шрифтах, ознакомьтесь с этим введение .

Заключение

В этом уроке мы обсудили свойство CSS font-weight и то, как оно влияет на жирность наших шрифтов.

Мы узнали, что жирнее и светлее означает, что на один относительный размер шрифта отличается от размера шрифта родительского элемента. На практике мы видели диапазон значений толщины шрифта, чтобы увидеть, как выглядит текст. Вы станете профессионалом в стилизации шрифтов с помощью font-weight!

Чтобы узнать больше о кодировании в CSS, прочитайте наше руководство по как выучить css . Вы можете прочитать наше руководство о том, как сделать жирным текст в HTML, если вы хотите сделать свой текст жирным, не полагаясь на CSS.

О нас: Career Karma — это платформа, предназначенная для помощи соискателям в поиске работы, исследовании и подключении к программам профессионального обучения для продвижения по карьерной лестнице. Узнайте о публикации CK.

Что дальше?

  • Хотите действовать?

    Подберите лучших буткемпов

Кристина Копецки

Об авторе: Кристина — опытный технический писатель, освещающий такие разнообразные темы, как Java, SQL, Python и веб-разработка. Она получила степень магистра музыки по игре на флейте в Канзасском университете и степень бакалавра музыки с дополнительными знаниями по французскому языку и средствам массовой информации в штате Юго-Восточный Миссури. До того, как присоединиться к команде Career Karma в июне 2020 года, Кристина была ассистентом преподавателя, руководителем группы и руководителем секции в Lambda School, где она руководила студенческими группами, выполняла проверки кода и проектов, а также устраняла проблемы для студентов. Технический контент Кристины часто публикуется в таких изданиях, как Codecademy, Repl.it и Educative.

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

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 49 тысяч раз

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

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

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

Richard

  • html
  • css
  • жирный

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

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

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

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

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

2

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

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

2

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

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

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

1

Добавление к ответу Гогуца. Вы можете использовать ключевое слово currentcolor , чтобы использовать цвет текста и избежать его жесткого кодирования.

Вот так:

 text-shadow: 0.5px 0 currentColor;
межбуквенный интервал: 0,5 пикселей;

Довольно толстый.

Comments
Leave Comment