Style font html bold: How to make text bold in HTML

Содержание

font ⚡️ HTML и CSS с примерами кода

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

Демо

Шрифт и Цвет

@font-face

font
font-family
font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings
font-weight
line-height

color
opacity
print-color-adjust

Синтаксис

/* size | family */
font: 2em 'Open Sans', sans-serif;
/* style | size | family */
font: italic 2em 'Open Sans', sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;
/* The font used in system dialogs */
font: message-box;
font: icon;
/* Global values */
font: inherit;
font: initial;
font: unset;

Значения

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

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

caption: Шрифт для текста элементов форм вроде кнопок.
icon: Шрифт для текста под иконками.
menu: Шрифт применяемый в меню.
message-box: Шрифт для диалоговых окон.
small-caption: Шрифт для подписей к небольшим элементам управления.
status-bar: Шрифт для строки состояния окон.

Значение по-умолчанию: зависит от использования

Применяется ко всем элементам

Спецификации

CSS Fonts Module Level 3
CSS Level 2 (Revision 1)
CSS Level 1

Описание и примеры

p {
  font: 12pt/10pt sans-serif;
}

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).

p {
  font: bold italic 110% serif;
}

Значение bold устанавливает жирное начертание текста, а italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (

serif).

p {
  font: normal small-caps 12px/14px fantasy;
}

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>font</title>
    <style>
      .  layer1 {
        font: 12pt sans-serif;
      }
      h2 {
        font: 2em serif;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Экзистенциальный либерализм</h2>
      <p>
        Карл Маркс исходил из того, что типология средств
        массовой коммуникации неизбежна.
      </p>
    </div>
  </body>
</html>

электронный код | Сайт ресурсов с кодом электронной почты

Последнее обновление: 10 ^th Март 2022 г.

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

Заголовки и параграфы

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Абзац

Здесь не так много нужно делать, но я советую установить margin и размер шрифта , если вы хотите единообразия. Большинство стилей, таких как font-family и color , будут наследоваться во всех почтовых клиентах для этих элементов, поэтому их не нужно сбрасывать. Но приложения Outlook, Samsung, mail.ru и Yahoo (в IE) в той или иной форме выполняют сброс на margin и/или font-size .

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

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

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

Жирный

  Важный текст Жирный текст

Элемент имеет семантическое значение, а — нет. При тестировании в Litmus не всегда применяла полужирный стиль к тексту при просмотре в IE. Я не уверен, какая это версия, но вам может понадобиться добавить style="font-weight: bold" .

Курсив

 Выделенный текст Курсив

Элемент имеет семантическое значение, а — нет. При тестировании в Litmus не всегда применялся курсив к тексту при просмотре в IE. Я не уверен, какая это версия, но вам может понадобиться добавить

style="font-style: italic;" .
Зачеркнутый
~~Удаленный текст~~ ~~Неверный текст~~
Оба они являются семантическими, но имеют немного разные значения. Однако в настоящее время это значение не передается в дерево специальных возможностей, поэтому вам нужно будет найти другое решение для передачи этой информации программе чтения с экрана.
Используйте вместе с , чтобы показать, когда текст был удален и заменен.
GMX и Web.de удаляют элемент

вместе со всеми стилями, классом или идентификатором. Таким образом, вы можете добавить , вложенный внутрь для поддержки этих клиентов.
MSO-версия Outlook добавляет цвет к элементу , я бегло просмотрел и просто применил встроенный цвет , поэтому нужно немного больше тестирования.
Существует также элемент ~~, но поскольку он устарел, я не буду его здесь описывать.~~
~~Подчеркнуть~~
~~Вставленный текст Стилистически другой текст~~
Оба они являются семантическими, но имеют немного разные значения. Однако в настоящее время это значение не передается в дерево специальных возможностей, поэтому вам нужно будет найти другое решение для передачи этой информации программе чтения с экрана.

~~Используйте вместе с , чтобы показать, когда текст был удален и заменен.~~
Yahoo и AOL удаляют элемент вместе со всеми стилями, классом или идентификатором. Таким образом, вы можете добавить , вложенный внутрь для поддержки этих клиентов.
~~MSO-версия Outlook добавляет цвет к элементу , я бегло просмотрел и просто применил встроенный цвет~~

, поэтому нужно немного больше тестирования.
Будьте осторожны при подчеркивании текста, так как это часто визуальная очередь для гиперссылки и может запутать читателя.
Смещение
_{Текст нижнего индекса} ^{Текст верхнего индекса}
Они являются чисто типографскими и не имеют семантического значения.
Маленький
Маленький текст
Это чисто типографское значение, не имеющее смыслового значения. Он отображает текст на 1 размер шрифта меньше, чем текущий параметр.
Код

Используйте HTML5
<!DOCTYPE html> в электронной почте

Используется для определения встроенного образца кода. Что я часто делаю на этом сайте и выглядит как
до
Используется для сохранения пробелов, разрывов строк и знаков табуляции в тексте. То, как вы отформатируете код в файле HTML, будет выглядеть на экране.
пробел
Отрисовывает все пробелы между словами.
Часто используется с для отображения образца многострочного кода с отступом.
Вообще советую поставить white-space: pre-wrap; , чтобы содержимое могло переноситься на меньшие области просмотра при использовании
. <!DOCTYPE html> <html lang="en" dir="ltr"> <голова> </head> <body class="body">  </body> </html> В этом примере я также сделал подсветку синтаксиса, чтобы код было легче читать. Есть несколько онлайн-инструментов, которые могут помочь в этом, например, highlight.hohli.com . Свойства шрифтов CSS — Бесплатный учебник для изучения HTML и CSS css Следующая статья Предыдущая статья размер шрифта Мы уже рассмотрели единицы размера CSS , которые, среди прочего, используются для установки размера шрифта. p{ font-size: 16px;} Имейте в виду, что установка размера шрифта 16px не сделает каждую букву высотой 16px . Фактический размер каждой буквы зависит от используемого семейства шрифтов. стиль шрифта Это свойство может сделать ваш текст курсив : h3{стиль шрифта: курсив;} Значение по умолчанию: стиль шрифта: обычный; . Другим возможным значением является косой , но он никогда не используется. вес шрифта Это свойство может сделать ваш текст полужирным : h3{начертание шрифта: полужирный;} Значение по умолчанию: насыщенность шрифта: нормальный; . В зависимости от используемого семейства шрифтов доступен диапазон значений веса шрифта, от 100 до 900 : вес шрифта: 100; /* Тонкий */ вес шрифта: 200; /* Дополнительный свет */ вес шрифта: 300; /* Свет */ вес шрифта: 400; /* То же, что и font-weight: normal; */ вес шрифта: 500; /* Середина */ вес шрифта: 600; /* полужирный */ вес шрифта: 700; /* То же, что и font-weight: bold; */ вес шрифта: 800; /* Очень жирный */ вес шрифта: 900; /* Ultra Bold */ Очень немногие шрифты поддерживают все 9 начертаний. Шрифт Exo — один из них. В основном вы найдете 400 (обычный) и 700 (жирный), а иногда 300 (светлый) и 500 (средний). вариант шрифта Это свойство превращает текст в прописные: h3{ вариант-шрифта: маленькие заглавные;} Значение по умолчанию: вариант-шрифта: нормальный; . Это не широко используемое свойство. Наверх Изучайте CSS с помощью моей электронной книги Эта электронная книга представляет собой пошаговое руководство, в котором я научу вас, как создать собственную личную веб-страницу с нуля, строка за строкой, с помощью HTML5, CSS3 и даже JS. Получи это сейчас MarkSheet это бесплатно и всегда будет . Если этот веб-сайт был полезен для вас, подумайте о том, чтобы сделать пожертвование. MarkSheet Джереми Томаса находится под лицензией Creative Commons BY-NC-SA 4. No related posts.