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

Шрифт 

Форматирование теста | Yocton

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

Элемент <mark> является новым в HTML5 и используется для пометки или выделения текста в документе Наиболее распространенным примером его использования является выделение результата поиска.
Например,

<p>Ниже приведен некоторый контент, содержащей запрос <mark>поиск</mark>. 
Выделение текста облегчит пользователю нахождение искомого. </p>

Отобразит:
Ниже приведен некоторый контент, содержащей запрос поиск. Выделение текста облегчит пользователю нахождение искомого.

Обычное стандартное форматирование для данного элемента — черный текст на желтом фоне, но это можно изменить с помощью CSS.

Для полужирного текста используйте теги <strong> или <b>:

<strong>Это жирный текст</strong>

или

<b>Это жирный текст</b>

Разница между ними только в семантике. Тег <strong> используется для обозначения важного текста, тег <b> не указывает на такое значение, а просто представляет текст, который должен быть выделен полужирным шрифтом.
Если использовать тег <b>, то голосовые браузеры не будут выделять отмеченные слова и они будут звучать так же как любое из других слов вокруг него. Используя тег

<strong> голосовые браузеры будет выделять такие слова, чтобы передать, что текст в какой-то мере важен.

Для использования курсива применяйте теги <em> или <i>:

<em>Это курсивный текст</em>

или

<i>Это курсивный текст</i>

Разница между ними только в семантике. Тег <em> используется , чтобы указать, что текст должен иметь дополнительный акцент, который следует подчеркнуть, тег <i> не указывает на такое значение, а просто представляет текст, который должен быть выделен курсивом.

Например, если вы хотите подчеркнуть действие внутри предложения, можно сделать это, выделив его курсивом через <em>: «Вы уже отправили отчет?»
Но если вам нужно идентифицировать книгу или газету, которую обычно выделяют стилистически, вы можете использовать просто <i>: «Я прочитал Ромео и Джульетту в старшей школе.»

Хотя сам элемент <u> устарел еще в HTML4, он был повторно введен с альтернативным смысловым значением в HTML5 — для представления неартикулированной, нетекстовой аннотации. Вы можете использовать такое выделение для обозначения текста с ошибками или для выделения имени пользователя в Китае.

Рекомендуется избегать использования элемента <u> там, где его можно спутать с гиперссылками.
Пример:

<p>Этот параграф содержит некоторый <u> ошЫбочный </u> текст.</p>

Этот параграф содержит некоторый ошЫбочный текст.

Чтобы отметить какое-то выражение как аббревиатуру, используйте тег <abbr>:

<p>Мне нравится писать на <abbr title = "Язык гипертекстовой разметки">HTML</abbr>!</p>

Мне нравится писать на HTML !
Если присутствует, атрибут title, то он позволяет увидеть полное описание такой аббревиатуры.

Чтобы пометить текст как вставленный, используйте тег <ins>:

<ins> Новый текст </ins>

Новый текст

Чтобы пометить текст как удаленный, используйте тег <del>:

<del> Удаленный текст </del>

Удаленный текст
Элемент del представляет собой удаление из документа. Такие элементы не должны пересекать подразумеваемые границы абзаца.

Чтобы пометить текст как перечеркнутый, используйте тег <s>:

<s> Перечеркнутый текст </s>

Перечеркнутый текст
Элемент s представляет собой содержимое, которое больше не является точным или не актуально.

Чтобы сместить текст вверх или вниз используются теги <sup> и <sub>.
Чтобы создать верхний индекс:

x<sup>2</sup>+x-4=0

x2+x-4=0

Чтобы создать нижний индекс:

HCl+NaOH=H<sub>2</sub>O+NaCl

HCl+NaOH=H2O+NaCl

HTML тег

❮ Назад Вперед ❯

Тег <b> используется для того, чтобы выделить жирным шрифтом фрагмент текста, который мы хотим сделать более заметным для пользователя. Тег <b> только выделяет фрагмент текста, он не имеет смысловой нагрузки (в том числе для поисковых систем). Для того, чтобы отметить важность текста используется тег <strong>․

В HTML5 тег <b> рекомендуется использовать только в крайнем случае, когда нет возможности использовать другие теги.

Для выделения отрезка текста жирным шрифтом, необходимо поместить его между открывающим <b> и закрывающим тегом </b>.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title> 
   </head>
   <body>
       <p><b>Этот отрезок текста </b> мы выделили жирным шрифтом.</p>
   </body>
</html>

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

Результат

Внешний вид содержимого контейнера <b> задается по умолчанию, но жирное начертание текста можно изменить при помощи CSS.

Вы также можете использовать свойство CSS font-weight для выделения текста жирным шрифтом.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    <style>
      .bold-text {
      font-weight: 700;
      }
    </style>
  </head>
  <body>
    <p><span>Этот отрезок текста</span> мы выделили жирным шрифтом.
 
 </p>
  </body>
</html>

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

Результат

Тег <b> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <b> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <b>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <b>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <b>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <b>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Свойство CSS font-weight

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


Пример

Установить разную толщину шрифта для трех абзацев:

p.normal {
  начертание шрифта: нормальное;
}

p.thick {
 начертание шрифта: полужирный;
}

p.thicker {
  начертание: 900;
}

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

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

Свойство font-weight определяет, насколько толстыми или тонкими должны отображаться символы в тексте.

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

Значение по умолчанию: обычный
Унаследовано: да
Анимация: да. Читать про анимированный Попробуй
Версия: CSS1
Синтаксис JavaScript: объект . style.fontWeight=»полужирный» Попробуй

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

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

Собственность
вес шрифта 2,0 4,0 1,0 1,3 3,5

Синтаксис CSS

вес шрифта: нормальный|жирный|жирнее|светлее| номер |начальный|наследовать;

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

.
Значение Описание Демо
обычный Определяет обычные символы. Это по умолчанию Демонстрация ❯
полужирный Определяет толстые символы Демонстрация ❯
жирнее Определяет более толстые символы Демонстрация ❯
зажигалка Определяет более светлые символы Демонстрация ❯
100
200
300
400
500
600
700
800
900		 Определяет от тонких до толстых символов. 400 соответствует обычному, а 700 соответствует полужирному Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

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

Учебник CSS: шрифт CSS

Ссылка CSS: свойство шрифта

Ссылка HTML DOM: свойство fontWeight

❮ Предыдущая Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по 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

9002 FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Лучший способ использования шрифта CSS Толщина: Объяснение полужирного шрифта CSS

Код добавлен в буфер обмена!

Reading time 1 min

Published Aug 10, 2017

Updated Oct 10, 2019

Contents
  • 1. Setting CSS font weight
  • 2. CSS font-weight syntax explained
  • 3. Browser support

Настройка веса шрифта CSS

Свойство CSS font-weight позволяет управлять жирностью шрифта:

Пример 

 p {
вес шрифта: нормальный;
}
а {
вес шрифта: полужирный;
}
р.толстый {
вес шрифта: 780;
}

Попробуйте Live Learn на Udacity

Pros

  • Упрощенный дизайн (без лишней информации)
  • Качественные курсы (даже бесплатные)
  • Variety of features

Main Features

  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion

EXCLUSIVE: 75% OFF

Pros

  • Easy to navigate
  • No технические проблемы
  • Кажется, заботятся о своих пользователях

Основные характеристики

  • Большое разнообразие курсов
  • 30-дневная политика возврата
  • Free certificates of completion

AS LOW AS 12. 99$

Pros

  • Great user experience
  • Offers quality content
  • Very transparent with their pricing

Main Features

  • Free certificates of завершение
  • Ориентирован на навыки работы с данными
  • Гибкий график обучения

СКИДКА 75%

Объяснение синтаксиса размера шрифта CSS

Чтобы определить пользовательскую жирность шрифта, вам необходимо определить одно значение:

вес шрифта: значение;

Толщина шрифта CSS может быть указана либо в ключевом слове , либо в числовом значении .

Значение Описание
Числовые значения Безразмерное число в диапазоне от 1 до 1000 . Чем выше число, тем жирнее текст
обычный Значение по умолчанию, равное 400 .

No related posts.

Автор записи

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

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