Полужирный шрифт html: font-weight | htmlbook.ru

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

Содержание

font-weight | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-weight</title>
  <style>
   h2 {
    font-weight: normal; /* Нормальное начертание */
   } 
   .select {
    color: maroon; /* Цвет текста */
    font-weight: 600; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <h2>Duis te feugifacilisi</h2>
  <p><span>Lorem ipsum dolor sit amet</span>, 
  consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
  dolore magna aliguam erat volutpat.
 
  Ut wisis enim ad minim veniam, quis nostrud 
  exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
  consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(«elementID»).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Шрифт

CSS по теме

  • font-weight

Статьи по теме

  • Свойства текста

Рецепты CSS

  • Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?

Как использовать жирный шрифт HTML?

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

  • Как сделать полужирный шрифт при помощи CSS-свойства font-weight
  • Делаем текст полужирным используя тег жирного шрифта в html <b>
  • Как сделать текст полужирным — какой метод уместнее?
  • Комбинируем выделение текста с помощью CSS и HTML

Не знаете как сделать текст жирным в CSS? CSS предоставляет нам специальное свойство font-weight, которое позволяет вывести полужирное начертание CSS.

Давайте взглянем на следующий пример:

<p>Пример <span>полужирного</span> текста при помощи CSS...</p>
<p>...а также полужирного выделения всего абзаца.</p>

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

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

В приведенном выше примере используются встроенные стили. Но я настоятельно рекомендую вам использовать внешние файлы и CSS-классы, так как это поможет применять единую стилизацию ко всем страницам сайта одновременно.

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

Давайте рассмотрим пример того как выделить текст жирным в HTML при помощи тега <b>:

<p>Пример <b>полужирного</b> текста при помощи HTML-тега...</p>
<p><b>...а также полужирного выделения всего абзаца.</b></p>

Пример полужирного текста при помощи HTML-тега…
…а также полужирного выделения всего абзаца.

HTML-тег <b> — самый быстрый способ вывести текст полужирным.

HTML предлагает несколько способов выделения текста. И у каждого тега конкретное предназначение.

HTML-тегКогда применяется
<b>Используется для вывода полужирного шрифта HTML, имеющего ключевое значение.
<em>Этот элемент позволяет привлечь внимание с помощью выделения определенного фрагмента текста.
<h2>, <h3>, <h4>, <h5>,
<h5> и <h6>		Эти теги используются для вывода подзаголовков различных уровней.
<mark>Используйте этот тег, когда хотите обратить внимание на определенное слово или фразу в справочных целях.
<strong>Этот элемент отражает важность и ценность обрамленного в него контента.

Элемент <b> следует использовать, когда другие элементы выделения не подходят. Если точнее: то элементы от <h2> до <h6> служат для выделения заголовков, акцентирование внимания производится с помощью элемента <em>, важные фрагменты следует выделять элементом <strong>, а текст справки можно отметить тегом <mark>.

Будет лучше всего, если вы научитесь комбинировать HTML шрифты и CSS-методы выделения текста в HTML-документах.

HTML-способы отлично подходят для определения значения выделенного текста, в то время как CSS-стилизация отвечает за внешний вид текста.

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

Валентин Сейидовавтор-переводчик статьи «HTML Bold»

Как выделить жирный шрифт, курсив и форматировать текст в HTML

Если вы работаете исключительно в системе управления контентом, такой как CMS Hub или WordPress, вы привыкли выделять текст жирным шрифтом, курсивом и подчеркиванием одним нажатием кнопки. Но что, если ваша панель инструментов не предлагает точный вариант форматирования, который вам нужен? Или вы не работаете в текстовом процессоре или CMS?

Нет проблем. Все, что вам нужно, это немного HTML и CSS. Ниже мы обсудим некоторые варианты использования форматирования текста. Затем мы рассмотрим процесс создания полужирного, курсивного, подчеркнутого, зачеркнутого, подстрочного и надстрочного текста.

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

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

При выделении текста жирным шрифтом рекомендуется использовать тег вместо тега . Это связано с тем, что является семантическим элементом, а — нет. Согласно спецификации HTML5, несемантические элементы могут затруднить локализацию контента и проверку на будущее. Кроме того, если выделение текста жирным шрифтом чисто стилистическое, лучше использовать CSS и отделить все стили страницы от содержимого.

По этой причине мы будем показывать примеры только с использованием и свойства CSS font-weight.

Избранный ресурс

Бесплатные шаблоны кодирования HTML

Заполните форму, чтобы получить бесплатные фрагменты кода.

Как выделить текст в HTML жирным шрифтом с помощью элемента Strong

Чтобы выделить текст с высокой важностью, поместите текст в теги .

Давайте посмотрим на пример.

Вот HTML:

 
 
Это обычный текст абзаца, и это важный текст.

Вот результат:

Как выделить текст в HTML жирным шрифтом с помощью свойства CSS Font-Weight

Чтобы выделить текст жирным шрифтом просто для украшения, используйте свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце полужирным шрифтом — вы бы заключили это слово в теги и использовали селектор класса CSS, чтобы применить свойство font-weight только к определенному элементу span.

Вот CSS:

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

Вот HTML:

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

Вот результат:

Как выделить текст в HTML курсивом

Чтобы выделить текст в HTML курсивом, используйте либо тег em, либо тег i (курсив). Оба этих тега выделяют текст курсивом, но тег em дополнительно указывает, что при чтении в тексте выделяется ударение. Вы также можете выделить текст курсивом, установив для свойства CSS font-style значение «курсив».

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

Узнайте больше: Руководство для начинающих по HTML и CSS

Хотите узнать больше об HTML? Загрузите наше бесплатное руководство с рекомендациями по началу работы с HTML.

Как выделить текст в HTML курсивом с помощью элемента выделения

Чтобы определить текст с ударением, поместите текст внутри тегов . Давайте посмотрим пример.

Вот HTML:

 
 
Это обычный текст абзаца, 
 
 
а это выделенный текст.

Вот результат:

Как выделить курсивом текст в HTML с помощью свойства CSS Font-Style

Чтобы выделить текст курсивом для украшения, используйте свойство CSS font-style. Представьте, что вы хотите выделить курсивом слово внутри абзаца. Сначала заключите слово в теги , а затем примените свойство font-style только к элементу span.

Вот CSS:

 
 .emphasized { стиль шрифта: курсив; }

Вот HTML:

 
 
Это обычный текст абзаца, и это слово выделено курсивом для украшения.

Вот результат:

Как подчеркнуть текст в HTML

Чтобы подчеркнуть текст в HTML и CSS, используйте свойство CSS text-decoration, для которого установлено значение «подчеркивание».

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

Рассмотрим оба метода ниже.

Как подчеркивать текст в HTML с помощью элемента неартикулированной аннотации

Если вы хотите отобразить неартикулированный текст или текст с нетекстовой аннотацией, поместите текст внутри тегов . Например:

 
 
В этом wrd написана ошибка, поэтому мы подчеркнули его.

Вот результат:

Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration

Если вы хотите подчеркнуть текст для украшения, а не представлять нетекстовую аннотацию, тогда вы должны использовать свойство CSS text-decoration, например:

Вот CSS:

 
 .underlined {украшение текста: подчеркивание;}

Вот HTML:

 
 
Это обычный текст, и  этот текст подчеркнут.

И вот результат:

Как визуализировать зачеркнутый текст в HTML

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

Если вы хотите показать текст зачеркнутым по другой причине, вы должны использовать свойство CSS text-decoration-line и установить для этого свойства значение «line-through».

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

Давайте рассмотрим примеры трех методов, поддерживаемых в текущей версии HTML.

Как зачеркнуть текст в HTML с помощью элемента Strikethrough

Если вы хотите зачеркнуть текст, чтобы показать, что он больше не является правильным, точным или релевантным, поместите текст внутри тегов . Давайте посмотрим на пример.

Вот HTML:

 
 
Встреча начнется в 17:00 в субботу теперь в воскресенье.

Вот результат:

Как зачеркнуть текст в HTML с помощью удаленного текстового элемента

Чтобы зачеркнуть текст, чтобы показать, что он был удален, поместите текст внутри тегов . Давайте посмотрим на пример с элементом списка:

Вот HTML:

 

 
 
Встречи теперь доступны для:
 

 
 <ул> 

 
 
  • 15:00
    •  
    
 
     
  • 16:00
    •  
    
 
     
  • 17:00
    •

    Вот результат:

    Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line

    Чтобы зачеркнуть текст для другой цели, используйте свойство CSS text-decoration-line.

    Вот CSS:

     
     .strike { text-decoration-line: line-through; }

    Вот HTML:

     
     
    Это обычный текст, и  этот текст сквозной.

    Вот результат:

    Как сделать текстовый подстрочный индекс в HTML

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

    Чтобы создать текст нижнего индекса в HTML, используйте элемент . См. пример ниже.

    Вот HTML:

     
     
    Химическая формула воды: H2O.

    Вот результат:

    Как сделать текст надстрочным в HTML

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

    Чтобы создать надстрочный текст в HTML, используйте элемент . См. пример ниже.

    Вот HTML:

     
     
    Вода необходима для всех форм жизни.1

    Вот результат:

    Форматирование текста с помощью HTML и CSS

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

    Примечание редактора: этот пост был первоначально опубликован в октябре 2020 г. и был обновлен для полноты картины.

    Темы: HTML

    Не забудьте поделиться этим постом!

    Форматирование текста HTML

    ❮ Назад Далее ❯

    HTML содержит несколько элементов для определения текста со специальным значением.

    Пример

    Этот текст выделен жирным шрифтом

    Этот текст выделен курсивом

    Это нижний индекс и верхний индекс

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

    Элементы форматирования HTML

    Элементы форматирования были разработаны для отображения специальных типов текста:

    • — Жирный текст
    • — Важный текст
    • — Курсив
    • — Выделенный текст
    • <знак> — Выделенный текст
    • — Меньший текст
    • — Удален текст
    • — Вставленный текст
    • — Текст нижнего индекса
    • — Надстрочный текст

    Элементы HTML

    и

    Элемент HTML определяет полужирный текст, без особого значения.

    Пример

    Этот текст выделен жирным шрифтом

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

    Элемент HTML определяет текст с сильным значением. Содержимое внутри обычно отображается жирным шрифтом.

    Пример

    Этот текст важно!

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

    Элементы HTML

    и

    Элемент HTML определяет часть текст в другом голосе или настроении. Содержимое внутри обычно отображается в курсив.

    Совет: Тег часто используется для обозначения технического термина, фраза из другого языка, мысль, название корабля и т. д.

    Пример

    Этот текст выделен курсивом

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

    Элемент HTML определяет выделенный текст. Содержимое внутри обычно отображается курсивом.

    Совет: Программа чтения с экрана произносит слова в с ударением, с использованием словесного ударения.

    Пример

    Этот текст подчеркнутый

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

    Элемент HTML

    Элемент HTML определяет текст меньшего размера:

    Пример

    Это текст меньшего размера.

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

    Элемент HTML

    Элемент HTML определяет текст что следует отметить или выделить:

    Example

    Не забудьте сегодня купить молоко.


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

    HTML Элемент

    HTML Элемент определяет текст который был удален из документа. Браузеры обычно бьют по линии через удаленный текст:

    Пример

    Мой любимый цвет — синий красный.


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

    Элемент HTML

    Элемент HTML определяет текст который был вставлен в документ. Браузеры обычно подчеркивают вставленные text:

    Пример

    Мой любимый цвет — синий красный.


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

    HTML-элемент

    Элемент HTML определяет подстрочный текст. Подстрочный текст отображается на полсимвола ниже обычной строки, и иногда отображается более мелким шрифтом. Подстрочный текст можно использовать для химические формулы, такие как H 2 O:

    Пример

    Это является подписанным текстом.


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

    Элемент HTML

    Элемент HTML определяет надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного строка и иногда отображается более мелким шрифтом. Можно использовать надстрочный текст для сносок, например WWW [1] :

    Пример

    Это текст с надстрочным индексом.


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

    HTML-упражнения

    Проверьте себя с помощью упражнений

    Упражнение:

    Добавьте особое значение слову «деградация» в абзаце ниже.

    <р>
    Миссия WWF — остановить деградация нашего естественная среда планеты.

    Начать упражнение

    Элементы форматирования текста HTML

    Тег Описание
    Определяет полужирный текст
    Определяет выделенный текст 
    <я> Определяет часть текста в альтернативном голосе или настроении
    <маленький> Определяет меньший текст
    <сильный> Определяет важный текст
    Определяет подстрочный текст
    Определяет текст с надстрочным индексом
    Определяет вставленный текст
    <удалить> Определяет удаленный текст
    <метка> Определяет отмеченный/выделенный текст

    Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

    ❮ Предыдущий Далее ❯


    НОВИНКА

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

    Узнать

    ВЫБОР ЦВЕТА
    КОД ИГРЫ

    Играть в игру

    Top Tutorials
    Учебник по HTML
    Учебник по CSS
    Учебник по JavaScript
    Учебник How To
    Учебник по SQL
    Учебник по Python
    Учебник по W3.CSS
    Учебник по Bootstrap
    Учебник по PHP
    Учебник по Java
    Учебник по C++
    Учебник по jQuery
    Top 3s Reference

    9003 900 Справочник по HTML
    Справочник по CSS
    Справочник по JavaScript
    Справочник по SQL
    Справочник по Python
    Справочник по W3.CSS
    Справочник по Bootstrap
    Справочник по PHP
    Цвета HTML
    Справочник по Java
    Справочник по Angular
    Справочник по jQuery

    Основные примеры
    Примеры HTML
    Примеры CSS
    Примеры JavaScript
    Примеры инструкций
    Примеры SQL
    Примеры Python
    Примеры W3.
    Comments
    Leave Comment