Html bold font: How to make text bold in HTML?
27.02.1970 
Разное
font-weight | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 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.
Значение относительных весов
Когда используется жирнее или светлее, следующая таблица используется для вычисления абсолютного веса элемента:
| наследуемое значение | жирнее | светлее |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
Определение веса имени
Значения от 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 видов:
Следующая таблица показывает примеры различных шрифтов (ваш браузер может не знать их все) и вы можете увидеть, что ваш браузер делает с каждым из пяти типовых шрифтов:
| ‘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), а в ряде случаев — экстра-светлые/экстра-жирные или растянутые/сжатые версии.
В таблице ниже приведены несколько различных стилей. Многие из строк будут выглядеть одинаково, если у вас нет большой коллекции шрифтов.
| правило | serif | sans-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
- Карьера Карма подойдет вам с лучшими техническими учебными курсами
- Получите эксклюзивные стипендии и подготовительные курсы
Наиболее распространенный способ, которым разработчики создают выделенный жирным шрифтом текст в
HTML, — это использование тега.Тегпредназначен для создания элемента, представляющего полужирный текст на веб-страницеHTML. Например, тегможет выделять подзаголовки в онлайн-статье.Вот пример тега
HTMLв действии:Это так просто. Если вы хотите выделить определенную часть текста жирным шрифтом, но оставить остальную часть абзаца, вы можете заключить тег
в раздел, как мы это делаем ниже:Этот текст выделен жирным шрифтом. Но этот текст выделен жирным шрифтом!
Вот результат нашего кода:
Начало абзаца выглядит нормально, а текст в теге
выделен жирным шрифтом.HTML
ТегКроме того, вы можете использовать тег
для создания выделенного жирным шрифтом текста вHTML. Тегработает точно так же, как тег, с одним отличием: сильный тег указывает на то, что его содержимое требует особого внимания.Вот пример использования тега:Ваше имя пользователя для вашего нового компьютера - JohnAppleseed
Внимание! Вы должны сменить пароль после входа в систему.
Наш код возвращает следующее:
Как видите, тег
используется для выделения текста, который читатель может захотеть прочитать. Тегиспользуется для обозначения того, что словуAttentionследует уделить особое внимание читателю.При этом, помимо этой разницы, тегииявляются одинаковыми.CSS font-weight Свойство
Теги
ииспользуются в обычныхHTML-элементах, чтобы указать, что текст важен и должен быть прочитан. Однако есть также свойствоCSS, которое дает нам больше контроля над тем, как выглядит наш текст:font-weight.
font-weightпозволяет кодировщикам определять, насколько тяжелым или легким — насколько жирным — будет отображаться конкретная часть текста.Вот пример тегаfont-weight, примененного к абзацу с тегомThick:
HTML:Это пример абзаца.
Это пример абзаца, выделенного жирным шрифтом
CSS:p.thick { font-weight: 900; }Наш код возвращает следующее:
В нашем примере мы определяем класс с именем
Thick, который устанавливает для свойстваfont-weightдля нашего текста значение 900, что означает, что текст, в котором мы ссылаемся на классThick, будет выделен жирным шрифтом.Стоит отметить, что мы можем настроить число «900» в зависимости от того, хотим ли мы, чтобы текст выглядел светлее или жирнее.В качестве альтернативы мы могли бы указать наш
font-weight, используя атрибут жирного шрифта stylefont-weight, например:Это пример абзаца.
Это пример абзаца, выделенного жирным шрифтом
Заключение
Полужирный текст — важная часть форматирования текста в
HTML.Если вам нужно привлечь внимание к определенной строке текста или нескольким словам, вы можете сделать это более смелым. В этом руководстве мы разделили три основных способа придания тексту смелости:,иfont-weight. Теперь вы готовы создавать жирный текст, как эксперт!Как выделить жирным шрифтом, курсивом и иным образом отформатировать текст в HTML
Работая почти исключительно в Google Docs и CMS Hub, я привык выделять текст жирным шрифтом, курсивом и подчеркивать одним нажатием кнопки.
Но что, если ваша панель инструментов не предлагает тот вариант форматирования, который вам нужен? Или вы не работаете в текстовом редакторе или системе управления контентом?
Нет проблем. Все, что вам нужно, это немного HTML и CSS. Ниже мы обсудим некоторые варианты использования форматирования текста. Затем мы рассмотрим процесс создания полужирного, курсивного, подчеркнутого, перечеркнутого, подстрочного и надстрочного текста.
Примечание : я буду использовать онлайн-редактор кода W3Schools, чтобы создать примеры ниже.Вы можете щелкнуть любую ссылку на источник, чтобы увидеть полный фрагмент кода, стоящий за примером, и попробовать свой собственный.
Форматирование текста в HTML
Форматированный текст может использоваться для различных целей. Он может привлечь внимание читателя к определенным частям документа. Это может подчеркнуть важную информацию. Он может выделить определенные слова в абзаце, например заголовок, ключевое слово, мысль или фразу на другом языке.
На снимке экрана ниже показано введение из книги «Наиболее важные различия между Squarespace и WordPress».Обратите внимание, что «Squarespace» и «WordPress» выделены жирным шрифтом. Это помогает выделить основную тему сообщения в блоге и отличает эти два ключевых слова от неформатированных абзацев, а также отформатированной внутренней ссылки и CTA.
Давайте посмотрим, как можно выделить текст в HTML полужирным шрифтом, чтобы воссоздать этот эффект в своих сообщениях в блоге или где-нибудь еще на своем веб-сайте.
Как выделить текст в HTML полужирным шрифтом
Есть несколько способов выделить текст в HTML полужирным шрифтом.Вы можете использовать сильный тег, чтобы указать, что текст имеет большую важность или срочность. Браузеры прочитают этот тег и выделят текст полужирным шрифтом. Если вы хотите выделить текст полужирным шрифтом просто для украшения, вы должны использовать свойство CSS font-weight и установить для этого свойства значение «полужирный».
Есть еще один способ выделить текст в HTML полужирным шрифтом: тег . Но это должно использоваться только в крайнем случае, потому что это может затруднить локализацию контента и будущую проверку в соответствии со спецификацией HTML5.По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.
Как выделить текст в HTML полужирным шрифтом с помощью сильного элемента
Если вы хотите определить особо важный текст, вы можете поместить его в теги. Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование сильного элемента HTML
Это нормальный абзац.
Этот абзац очень важен!
Вот результат:
Источник изображения
Как выделить текст в HTML полужирным шрифтом с помощью свойства CSS Font-Weight
Если вы хотите просто выделить текст жирным шрифтом для украшения, вы должны использовать свойство CSS font-weight вместо сильного элемента HTML. Допустим, вы хотите выделить слово в абзаце жирным шрифтом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-weight только к элементу span.
Вот код CSS:
span {font-weight: bold;
}
Вот HTML:
Использование свойства CSS Font-Weight
Это ключевое слово , поэтому я хочу выделить его жирным шрифтом с помощью CSS.
Вот результат:
Источник изображения
Как выделить текст в HTML курсивом
Есть несколько способов выделить текст в HTML курсивом.Вы можете использовать тег em, чтобы указать, что в тексте выделено ударение. Браузеры прочитают этот тег и выделят текст курсивом. Если вы хотите выделить текст курсивом просто для украшения, вы должны использовать свойство CSS font-style и установить для этого свойства значение «курсив».
Есть еще один способ выделить текст в HTML курсивом: тег . Как и тег , он предназначен для использования в крайнем случае. По этой причине мы будем показывать только примеры с использованием тега и свойства CSS font-weight.
Как выделить текст в HTML курсивом с помощью элемента акцента
Если вы хотите определить текст с акцентом на ударение, вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование элемента выделения HTML
Это нормальный абзац.
Этот абзац выделен!
Вот результат:
Источник изображения
Как выделить текст в HTML курсивом с помощью свойства стиля шрифта CSS
Если вы хотите просто выделить текст курсивом для украшения, вы должны использовать свойство CSS font-style вместо элемента выделения HTML.Следуя приведенному выше полужирному примеру, скажем, вы хотите выделить слово в абзаце курсивом. Затем вы должны заключить слово в теги span и использовать селектор CSS, чтобы применить свойство font-style только к элементу span.
Вот код CSS:
span {шрифт: курсив;
}
Вот HTML:
Использование свойства CSS Font-Style
Иди в школу сейчас !
Я хотел, чтобы читатель услышал это слово другим тоном, поэтому я выделил его курсивом с помощью CSS.
Вот результат:
Источник изображения
Как подчеркнуть текст в HTML
Чтобы подчеркнуть текст в HTML, используйте свойство CSS text-decoration и установите для этого свойства значение «подчеркивание».
Есть еще один способ подчеркнуть текст в HTML: элемент . Но это не должно использоваться для подчеркивания текста в презентационных целях. Вместо этого элемент предназначен для конкретных случаев использования, таких как разметка слов с ошибками, обозначение собственных имен в китайском тексте или обозначение фамилий.
Рассмотрим оба метода ниже.
Как подчеркнуть текст в HTML с помощью неартикулированного элемента аннотации
Если вы хотите представить текст без артикуляции или с нетекстовой аннотацией, то вы можете поместить текст внутри тегов . Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.
Вот HTML:
Использование неартикулированного элемента аннотации HTML
В этом абзаце нет орфографической ошибки.
В этом абзаце есть орфографические ошибки .
Вот результат:
Источник изображения
Как подчеркнуть текст в HTML с помощью свойства CSS Text-Decoration
Если вы хотите подчеркнуть текст для украшения, а не для представления нетекстовой аннотации, вы должны использовать свойство CSS text-decoration. Вы также можете использовать это свойство для представления орфографической ошибки, как это делает текстовый процессор.
Поскольку text-decoration является сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, вы можете подчеркнуть орфографическую ошибку красной волнистой линией, а грамматическую ошибку — зеленой, Например.
В приведенном ниже примере мы заключим слова в теги span с разными атрибутами класса. Таким образом, мы можем применить к каждому из них уникальные свойства стиля. Мы также будем использовать шестнадцатеричные коды цветов для красного и зеленого.
Вот код CSS:
.орфография {text-decoration: # FF0000 волнистое подчеркивание;
}
.grammar {
оформление текста: # 008000 волнистое подчеркивание;
}
Вот HTML:
Использование свойства CSS Text-Decoration
В этом абзаце неправильное написание .
В этом абзаце есть грамматическая ошибка .
Вот результат:
Источник изображения
Как отрисовать зачеркнутый текст в HTML
Существует несколько способов визуализации зачеркнутого текста в HTML, который представляет собой текст, отображаемый с горизонтальной линией над ним.Вы можете использовать тег
, чтобы указать, что текст теперь неверный, неточный или нерелевантный. Если вы хотите указать текст, который был удален, используйте тег.Если вы хотите, чтобы текст был зачеркнут по другой причине, вы должны использовать свойство CSS text-decoration-line и установить для этого свойства значение «line-through».
Важно отметить, что раньше был еще один элемент: HTML-элемент
. Но с тех пор это устарело и больше не является жизнеспособным вариантом для визуализации зачеркнутого текста.Давайте посмотрим на примеры трех методов, поддерживаемых в текущей версии HTML.
Как зачеркнуть текст в HTML с помощью зачеркнутого элемента
Если вы хотите зачеркнуть текст, чтобы показать, что он больше не является правильным, точным или релевантным, вы можете поместить текст внутри тегов
. Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.Вот HTML:
Использование зачеркнутого HTML-элемента
Есть еще несколько лепешек.
ПРОДАНО
Вот результат:
Источник изображения
Как зачеркнуть текст в HTML с помощью удаленного текстового элемента
Если вы хотите зачеркнуть текст, чтобы показать, что он был удален, вы можете поместить текст внутри тегов
. Этот тег будет вложен в другой элемент, например в элемент абзаца или диапазона. Давайте посмотрим на пример.Вот HTML:
Использование удаленного текстового элемента HTML
Событие начинается с
7 p.м. ET18:00 ET. Приносим извинения за ошибку.
Вот результат:
Источник изображения
Как зачеркнуть текст в HTML с помощью свойства CSS Text-Decoration-Line
Если вы хотите зачеркнуть текст для другой цели, вы должны использовать свойство CSS text-decoration-line.
В приведенном ниже примере мы включим имена классов рядом с некоторыми элементами списка. Таким образом, мы можем применить свойство text-decoration-line к этим конкретным позициям, а не ко всему списку.
Вот код CSS:
.purchased {text-decoration-line: line-through;
}
Вот HTML:
Использование свойства CSS Text-Decoration-Line
Список покупок
- Халапеньо
- Сумка замороженной кукурузы
- сыр Cotija
- Mayo
- Chili Powder
- Cilantro
- Лайм
Вот результат:
Источник изображения
Как сделать текстовый индекс в HTML
Обычно отображается более мелким, но более толстым шрифтом, текст нижнего индекса отображается на полсимвола ниже нормальной строки.Его можно использовать для написания химических формул, математических уравнений, дробей и многого другого.
Для создания подстрочного текста в HTML используйте элемент . Ниже приведен пример, показывающий формулу создания угольной кислоты.
Вот HTML:
Использование элемента нижнего индекса HTML
Вот как это выглядит с тегом нижнего индекса.
CO 2 + H 2 O ↔ H 2 CO 3
Вот как это выглядит без нижнего тега.
CO2 + h3O ↔ h3CO3
Вот результат:
Источник изображения
Как сделать текстовый надстрочный индекс в HTML
Обычно отображается более мелким, но более крупным шрифтом, надстрочный текст появляется на полсимвола над нормальной линией. Его можно использовать для написания сносок, авторских прав, зарегистрированных товарных знаков, а также некоторых химических формул.
Чтобы создать надстрочный текст в HTML, используйте элемент .Ниже приведен пример, который показывает всю формулу создания бикарбонат-иона.
Вот HTML:
Использование элемента верхнего индекса HTML
Вот как это выглядит с тегами нижнего и верхнего индекса.
CO 2 + H 2 O ↔ H 2 CO 3 ↔ H + + HCO 3 -
Вот как это выглядит без тегов.
CO2 + h3O ↔ h3CO3 ↔ H + + HCO3
Форматируя текст любым из описанных выше способов, вы можете помочь своим читателям лучше понять и сохранить информацию с вашего сайта. Если вы хотите выделить ключевые слова жирным шрифтом или включить подстрочный индекс в химические формулы, форматирование текста требует только базовых знаний HTML и CSS.
css — Как сделать текст в HTML жирным?
Может ли кто-нибудь сказать мне, что я делаю не так? »
«полужирный» никогда не был элементом HTML («b» — наиболее близкое соответствие).
HTML должен содержать структурированный контент; CSS издателя должен предлагать стили для этого контента. Таким образом, пользовательские агенты могут предоставлять структурированный контент с полезными стилями и элементами навигации для пользователей, которые не могут видеть предложенный вами жирный стиль (например, пользователи поисковых систем, полностью слепые пользователи, использующие программы чтения с экрана, слабовидящие пользователи, использующие свои собственные цвета и шрифты, фанатичных пользователей, использующих текстовые браузеры, пользователей голосовых браузеров с голосовым управлением, таких как Opera для Windows). Таким образом, правильный способ выделения текста жирным шрифтом зависит от , почему вы хотите выделить жирным шрифтом.Например:
Хотите отличать заголовки от другого текста? Используйте элементы заголовка (от «h2» до «h6») и предложите им полужирный стиль в вашем CSS («h2, h3, h4, h5, h5, h6 {font-weight: bold;}».
Хотите выделить подписи для полей формы жирным шрифтом? Используйте элемент «label», программно свяжите его с соответствующим элементом «select», «input» или «textarea», присвоив ему атрибут «for», соответствующий атрибуту «id» на цели, и предложите жирный стиль для это в вашем CSS («label {font-weight: bold;»}).
Хотите выделить заголовок для группы связанных полей в форме, например группы вариантов выбора радио? Окружите их элементом «fieldset», дайте ему элемент «legend» и предложите жирный стиль для него в вашем CSS («legend {font-weight: bold;}»).
Хотите отличить заголовок таблицы от подписи к ней? Используйте элемент «caption» и предложите для него жирный стиль в вашем CSS («caption {font-weight: bold;}»).
Хотите отличать заголовки таблиц от ячеек данных таблицы? Используйте элемент «th» и предложите ему полужирный стиль в вашем CSS («th {font-weight: bold;}»).
Хотите отличить название упомянутого фильма или альбома от окружающего текста? Используйте элемент «cite» с классом («cite) и предложите жирный стиль для него в вашем CSS (» .movie-title {font-weight: bold;} «).
Хотите отличить определенное ключевое слово от окружающего текста, определяющего или объясняющего его? Используйте элемент «dfn» и предложите для него жирный стиль в вашем CSS («dfn {font-weight: bold;}»).
Хотите отличить компьютерный код от окружающего текста? Используйте элемент «код» и предложите для него полужирный стиль в вашем CSS («code {font-weight: bold;}»).
Хотите отличить имя переменной от окружающего текста? Используйте элемент «var» и предложите ему полужирный стиль в своем CSS («var {font-weight: bold;}»).
Хотите указать, что какой-то текст был добавлен в качестве обновления? Используйте элемент «ins» и предложите для него полужирный стиль в своем CSS («ins {font-weight: bold;}»).
Хотите слегка выделить текст («Я люблю котят!»)? Используйте элемент «em» и предложите для него жирный стиль в вашем CSS (например,г. «em {font-weight: bold;}»).
Хотите сильно выделить какой-нибудь текст, возможно, для предупреждения (« Осторожно, собака! »)? Используйте «сильный» элемент и предложите для него жирный стиль в вашем CSS (например, «strong {font-weight: bold;}»).
… Вы поняли (надеюсь).
Не удается найти элемент HTML с правильной семантикой для выражения / почему / вы хотите выделить этот конкретный текст жирным шрифтом? Оберните его в общий элемент «span», дайте ему осмысленное имя класса, которое выражает ваше обоснование различения этого текста (« Позвольте мне начать эту новостную статью с предложения, которое резюмирует его.) и предложите для него полужирный стиль в своем CSS («.lede {font-weight: bold;»}. Прежде чем создавать собственные имена классов, вы можете проверить, существует ли микроформат (microformats. org) или обычное соглашение о том, что вы хотите выразить.
.
Leave a Comment