Html bold font: How to make text bold in HTML?


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


Содержание

font-weight | htmlbook.ru

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

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

Версии CSS

Описание

Устанавливает насыщенность шрифта. Значение устанавливается от 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. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font-weight — CSS | MDN

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

font-weight: normal;
font-weight: bold;


font-weight: lighter;
font-weight: bolder;

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;


font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal
Нормальное начертание. То же, что и 400.
bold
Полужирное начертание. То же, что и 700.
lighter
Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).
bolder
Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
100, 200, 300, 400, 500, 600, 700, 800, 900
Цифровые значения насыщенности шрифтов, которые позволяют задавать больше, чем нормальное и полужирное начертание.

Недоступность заданного значения

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

  • Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400, будет применено 500. Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
  • Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

Значение относительных весов

Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:

наследуемое значениежирнеесветлее
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

ЗначениеОбщее название
100Тонкий (Волосяной) Thin (Hairline)
200Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300Светлый Light
400Нормальный Normal
500Средний Medium
600Полужирный Semi Bold (Demi Bold)
700Жирный Bold
800Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900Чёрный (Густой) Black (Heavy)

Интерполяция

Значения font-weight интерполируются  с помощью дискретных шагов (кратные 100). Интерполяция происходит в действительном пространстве чисел и превращается в целое число путём округления до ближайшего числа, кратного 100, со значениями посредине между кратными 100 округлёнными в сторону положительной бесконечности.

Формальный синтаксис

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>

<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS


p {
  font-weight: bold;
}


div {
 font-weight: 600;
}


span {
  font-weight: lighter;
}

Result

BCD tables only load in the browser

CSS: шрифты

CSS: шрифты

Смотрите также указатель всех приёмов работы.

На этой странице:

Семейства шрифтов

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

Поскольку не все шрифты доступны на всех компьютерах (существуют тысячи шрифтов и большинство из них не бесплатны), CSS предусматривает резервную систему. Первым вы указываете шрифт, который хотели бы использовать. Затем следуют любые шрифты, которые вы могли бы использовать, если первый указанный шрифт не доступен. А закончить список вы должны типовым шрифтом, который имеет 5 видов:

serif, sans-serif, monospace, cursive и fantasy.

Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:

‘sans-serif’: обычные шрифты без засечек
Arial, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Helvetica, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Verdana, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Trebuchet MS, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Gill Sans, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Noto Sans, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
Arial Narrow, sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
sans-serifСъешь же ещё этих мягких французских булок да выпей чаю
‘serif’: обычные шрифты с засечками
Times, Times New Roman, serifСъешь же ещё этих мягких французских булок да выпей чаю
Georgia, serifСъешь же ещё этих мягких французских булок да выпей чаю
Palatino, URW Palladio L, serifСъешь же ещё этих мягких французских булок да выпей чаю
Bookman, URW Bookman L, serifСъешь же ещё этих мягких французских булок да выпей чаю
New Century Schoolbook, TeX Gyre Schola, serifСъешь же ещё этих мягких французских булок да выпей чаю
serifСъешь же ещё этих мягких французских булок да выпей чаю
‘monospace’: шрифты фиксированной ширины
Andale Mono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
Courier New, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
Courier, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
FreeMono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
DejaVu Sans Mono, monospaceСъешь же ещё этих мягких французских булок да выпей чаю
monospaceСъешь же ещё этих мягких французских булок да выпей чаю
‘cursive’: шрифты, имитирующие почерк
Comic Sans MS, Comic Sans, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Bradley Hand, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Brush Script MT, Brush Script Std, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
Snell Roundhand, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
URW Chancery L, cursiveСъешь же ещё этих мягких французских булок да выпей чаю
cursiveСъешь же ещё этих мягких французских булок да выпей чаю
‘fantasy’: декоративные шрифты, для названий и т.д..
Impact, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Luminari, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Marker Felt, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
Trattatello, fantasyСъешь же ещё этих мягких французских булок да выпей чаю
fantasyСъешь же ещё этих мягких французских булок да выпей чаю

Стили шрифтов

Большинство шрифтов имеют разнообразные стили в пределах одного и того же шрифтового семейства. Обычно это жирный стиль (bold) или курсив (italic), часто встречается также стиль «жирный курсив» (bold italic), реже — капитель (малые прописные буквы — small-caps), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.

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

правилоserifsans-serif
Стили
font-style: normalСъешь же…Съешь же…
font-style: italicСъешь же…Съешь же…
font-style: obliqueСъешь же…Съешь же…
Насыщенность шрифта
font-weight: 100Съешь же…Съешь же…
font-weight: 200Съешь же…Съешь же…
font-weight: 300Съешь же…Съешь же…
font-weight: normalСъешь же…Съешь же…
font-weight: 500Съешь же…Съешь же…
font-weight: 600Съешь же…Съешь же…
font-weight: boldСъешь же…Съешь же…
font-weight: 800Съешь же…Съешь же…
font-weight: 900Съешь же…Съешь же…
Варианты
font-variant: normalСъешь же…Съешь же…
font-variant: small-capsСъешь же…Съешь же…
Растяжение
font-stretch: ultra-condensedСъешь же…Съешь же…
font-stretch: extra-condensedСъешь же…Съешь же…
font-stretch: condensedСъешь же…Съешь же…
font-stretch: semi-condensedСъешь же…Съешь же…
font-stretch: normalСъешь же…Съешь же…
font-stretch: semi-expandedСъешь же…Съешь же…
font-stretch: expandedСъешь же…Съешь же…
font-stretch: extra-expandedСъешь же…Съешь же…
font-stretch: ultra-expanded Съешь же…Съешь же…

Модуль «Шрифты» в CSS имеет больше свойств для указания специальных стилей (для шрифтов, которые поддерживают несколько вариантов), в частности, свойство font-variant имеет гораздо больше значений.

Навигация по сайту

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

Alumni who also served as faculty are listed in bold font, with degree and year. Выпускники, которые также служили в качестве преподавателей, перечислены жирным шрифтом, со степенью и годом.
Bold font indicates that party won the presidential election. Жирный шрифт указывает на то, что партия победила на президентских выборах.
Also, suggest not having the bold font since it doesn’t work well because there is a mix of blue and black characters. Кроме того, предложите не использовать жирный шрифт, так как он плохо работает, потому что есть смесь синих и черных символов.
Другие результаты
Select the Home tab and then select the formatting you want like font, font size, Bold, Italic, or Underline. Откройте вкладку Главная и выберите необходимые параметры форматирования, например шрифт, его размер, полужирное начертание, курсив или подчеркивание.
For example, you can select text and make it Bold, change the Font, and increase Font Size. Например, вы можете выделить текст и сделать его полужирным, изменить шрифт и увеличить его размер.
I like the new typography and the serif headers elsewhere, but on the Main Page they look weird because of the extra bold applied to the font which was there before. Мне нравится новая типография и заголовки с засечками в других местах, но на главной странице они выглядят странно из-за дополнительного полужирного шрифта, примененного к шрифту, который был там раньше.
Bold-faced text can be softened, or visually thinned, by using dark gray text, rather than typical black, as the text font-color. Полужирный текст можно смягчить или визуально утончить, используя темно-серый текст, а не типичный черный, как цвет шрифта текста.
Technical document design stresses proper usage of document design choices like bullet points, font-size, and bold text. Различные типы суглинистых почв имеют несколько иные характеристики, причем некоторые из них дренируют жидкости более эффективно, чем другие.
Roboto Bold is the default font in Unreal Engine 4, and in Kodi. Roboto Bold-это шрифт по умолчанию в Unreal Engine 4 и в Kodi.
Bolded+Italicized would indicate that you substitute strings into those positions, while regular font means you put down what you see. Жирный шрифт+курсив означают, что вы подставляете строки в эти позиции, в то время как обычный шрифт означает, что вы записываете то, что видите.
I think this statement is a bit bold, given that Just Fontaine, who scored 13 goals at the 1958 world cup was from Morocco. Я думаю, что это заявление немного смелое, учитывая, что только Фонтейн, который забил 13 голов на чемпионате мира 1958 года, был из Марокко.
Influenced by Didone serif fonts of the period and sign painting traditions, these were often quite solid, bold designs suitable for headlines and advertisements. Под влиянием дидонских шрифтов с засечками того периода и традиций росписи вывесок, они часто были довольно твердыми, смелыми рисунками, подходящими для заголовков и рекламных объявлений.
Members of the Cabinet are indicated with bold fonts. Члены Кабинета министров выделены жирным шрифтом.

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


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


Пример

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

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

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

Попробуй сам »

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

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

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

HTML

и Элементы

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

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



Элементы HTML

и

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

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

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

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


HTML

элемент

Элемент HTML определяет мелкий текст:


HTML

Элемент

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


HTML-элемент

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


HTML

Элемент

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


HTML

Элемент

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


HTML-элемент

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


Упражнения HTML


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

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


Элементы цитаты HTML


В этой главе мы рассмотрим

, , , <адрес> , , и HTML-элементов.


Пример

Вот цитата с сайта WWF:

Уже почти 60 лет WWF защищает будущее природы. Ведущая в мире природоохранная организация, WWF работает в 100 странах и поддерживается более чем одним миллионом членов в Соединенных Штатах и почти пять миллионов во всем мире.
Попробуй сам »

HTML

для предложений

Элемент HTML

определяет раздел, который цитируется из другого источника.

Браузеры обычно делают отступ

элементов.

Пример

Вот цитата с веб-сайта WWF:



На протяжении 50 лет WWF защищает будущее природа.
Мир ведущая природоохранная организация,
WWF работает в 100 странах и является при поддержке
1,2 миллиона членов в Соединенных Штатах и ​​
человек, близких к 5 миллионов во всем мире.

Попробуй сам »

HTML

для коротких предложений

Тег HTML определяет короткую цитату.

Браузеры обычно заключают кавычки в кавычки.

Пример

Цель WWF: Построить будущее, в котором люди будут жить в гармонии с природа.

Попробуй сам »

HTML

для сокращений

Тег HTML определяет аббревиатуру или акроним, например «HTML», «CSS», «Mr.», «Доктор», «Как можно скорее», «Банкомат».

Маркировка сокращений может дать полезную информацию браузерам, перевод системы и поисковые системы.

Совет: Используйте глобальный атрибут заголовка для показать описание для аббревиатура / акроним при наведении указателя мыши на элемент.

Пример

ВОЗ была основана в 1948г.

Попробуй сам »

HTML

<адрес> для контактной информации

Тег HTML

определяет контактную информацию автора / владельца документа. или статья.

Контактная информация может быть адресом электронной почты, URL, физическим адресом, телефоном. номер, идентификатор в социальной сети и т. д.

Текст в элементе

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

Пример


Написано Джоном Доу.

Посетите нас по адресу:

Example.com

Box 564, Диснейленд

США

Попробуй сам »

HTML

для названия работы

Тег HTML определяет заголовок творческая работа (эл.г. книга, стихотворение, песня, фильм, картина, скульптура и т. д.).

Примечание: Имя человека не является названием произведения.

Текст в элементе обычно отображается курсивом .

Пример

Крик Эдварда Мунка. Написана в 1893 году.

Попробуй сам »

HTML

для двунаправленного обхода

BDO означает двунаправленное переключение.

Тег HTML используется для переопределения текущее направление текста:

Пример

Этот текст будет написан справа налево

Попробуй сам »

Упражнения HTML


HTML-цитаты и элементы цитирования

Тег Описание
Определяет аббревиатуру или акроним
<адрес> Определяет контактную информацию автора / владельца документа
Определяет направление текста
Определяет раздел, цитируемый из другого источника
Определяет название произведения
Определяет короткую встроенную цитату


HTML b Тег


Пример

Выделите текст жирным шрифтом (не отмечая его как важный):

Это обычный текст — жирный текст .

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


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

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


Советы и примечания

Примечание: Согласно спецификации HTML5, тег следует использовать как ПОСЛЕДНЕЕ средство, когда нет более подходящего тега. В В спецификации указано, что заголовки должны быть обозначены

в теги

, выделенный текст должен обозначать
, следует обозначить важный текст с тегом , а выделенный / выделенный текст должен обозначать Тег .

Совет: Для выделения текста жирным шрифтом можно также использовать следующий CSS: «font-weight: жирный; «.


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

Элемент
Есть Есть Есть Есть Есть

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.


Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.



Другие примеры

Пример

Используйте CSS, чтобы выделить полужирный текст:

Это обычный текст — жирным шрифтом текст .

Попробуй сам »

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

Учебное пособие по HTML: Форматирование текста HTML

Ссылка на HTML DOM: жирный объект


Настройки CSS по умолчанию

Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:


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


Пример

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

п.нормальный {
font-weight: normal;
} Толщина

стр. {
font-weight: bold;
}

на

стр. Толще {
font-weight: 900;
}

Попробуй сам »

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

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


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

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

Имущество
font-weight 2.0 4,0 1,0 1,3 3,5


Синтаксис CSS

font-weight: нормальный | полужирный | полужирный | светлее | номер | начальный | наследование;

Стоимость недвижимости

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

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

Учебник

CSS: Шрифт CSS

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

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



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

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


При разработке веб-страницы вы можете выделить определенный фрагмент текста.

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

В HTML есть встроенные функции, которые позволяют кодировщикам выделять конкретный текст.В этом руководстве мы разберем три наиболее распространенных способа придания тексту более яркого оттенка в HTML : тег , тег и каскадные таблицы стилей (CSS ) параметр.

HTML

Тег

Найдите свой учебный лагерь Match