Жирный шрифт html css: Курсив и жирный шрифт CSS — учебник CSS


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


Содержание

Курсив и жирный шрифт CSS — учебник CSS

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

Жирный шрифт в CSS: свойство font-weight

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

bold Полужирный шрифт
normal Обычный шрифт
bolder Более жирный шрифт, чем у родителя
lighter Менее жирный шрифт, чем у родителя
inherit Наследует значение родителя
Числовое значение от 100 до 900 От очень тонкого до очень жирного шрифта

Пример записи:


p {
font-weight: bold;
}

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

inherit (такое же, как у родителя), а также используя числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900, настраивая жирность шрифта от самого тонкого до самого плотного.

Примечание: числовые значения от 100 до 900, означающие толщину шрифта, сработают только в том случае, если у шрифта, с которым вы работаете, предусмотрены эти варианты начертания. Данные значения используются в основном с веб-шрифтами, о которых мы говорили в первой подглаве.

Курсив в CSS: свойство font-style

Задать курсивное начертание шрифта можно при помощи значений свойства font-style:

italic Курсивный шрифт
oblique Наклонный шрифт
normal Обычный шрифт
inherit Наследует значение родителя

Пример записи:


p {
font-style: italic;
}

Чтобы сделать курсив в CSS, используйте значение italic. Второе значение в таблице –

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

Значение normal устанавливает обычный стиль шрифта, а inherit позволяет наследовать стиль родителя.

Далее в книге: строчные и заглавные буквы с помощью свойства CSS text-transform.

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

Сегодняшней публикацией начинаю цикл статей про жирные шрифты. Изначально думал разместить все нюансы и вопросы по теме в одном месте, но информации оказалось слишком много. Лучше воспринимать ее постепенно. Поэтому перед тем, как перейти к разным обзорам шрифтов для создания фотошоп иллюстраций рассмотрю вопросы, связанные с версткой. Подборки фонтов найдете тут: интересные жирные, разные bold и русские толстые шрифты.

Сегодня расскажу как сделать слова жирным шрифтом на сайте с помощью HTML и CSS. Такое оформление используется когда вам нужно выделить определенную информацию на странице. Причем речь идет не только о заголовках, но и о простых словах, фразах в тексте. Реализовывается это достаточно просто.

Жирный текст на HTML

Для выделения определенного текста жирным используются специальные HTML теги — <b> и <strong>. Например следующий код:

<p>Обычный текст.</p>
<p><b>Жирный текст</b>.</p> 
<p><strong>Жирный текст strong</strong>.</p>

<p>Обычный текст.</p> <p><b>Жирный текст</b>.</p> <p><strong>Жирный текст strong</strong>.</p>

На выходе дает такую картинку:

Последние два варианта визуально выглядят одинаково, однако они между собой немного отличаются. Тег <b> задает простое стилистическое выделение слова жирным шрифтом, тогда как <strong> добавляет при этом некое семантическое «усиленное» (важное) значение. То есть последняя строка — это не просто жирный текст, а какая-то важная информация. В принципе, для поисковиков рекомендуют использовать именно <strong>.

Вы также можете встретить прописанный в HTML жирный шрифт с помощью стилей:

<p>Пример жирного текста.</p>
<p>Пример текста с <span>жирным</span> словом.</p>

<p>Пример жирного текста.</p> <p>Пример текста с <span>жирным</span> словом.</p>

На сайте это отображается так:

Не смотря на то, что код жирного текста для HTML работает корректно, так делать не следует. Все стили оформления должны быть вынесены в CSS файл. Поэтому в примере выше вы должны были для тегов <p> и <span> указать соответствующий класс, а затем прописать его оформление в таблице стилей. Такие вот правила оформления кода. Поэтому для жирного шрифта в HTML используйте тег <strong>.

Жирный текст на CSS


Дабы сделать в CSS жирный шрифт используется свойство font-weight. С его помощью указывается «насыщенность» фрагмента текста. Значения могут быть от 100 до 900, но наиболее часто используемые это:

  • bold (жирный) — 700 по умолчанию;
  • normal (обычный) — 400 по умолчанию.

Есть также варианты значений bolder и lighter, которые меняют шрифт в зависимости от родителя на более или менее жирный соответственно.

Чтобы задать жирный текст в CSS нужно тому или иному элементу задать какой-то стиль, например:

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

<p>Обычный текст с <span>жирным выделением</span> по центру.</p>

Далее в CSS стилях вы определяете для него жирность вместе с другими свойствами по типу подчеркивания текста и т.п.:

. my-bold-font {
    color: black;
    font-weight: 700; 
 }

. my-bold-font { color: black; font-weight: 700; }

Либо можно написать:

. my-bold-font {
    color: black;
    font-weight: bold;
 }

. my-bold-font { color: black; font-weight: bold; }

Разницы нет никакой. Кстати, если говорить о HTML теге <strong>, то для него по умолчанию прописан такой стиль:

strong {
    font-weight: bold;
}

strong { font-weight: bold; }

Тут хотелось отметить один небольшой нюанс, который мне рассказали на курсах верстки — если вы создаете для какого-то элемента новый класс, то желательно использовать более-менее «понятное название». Например, в примере выше стиль class=»my-bold-font» выглядит логичнее чем class=»new-font», т.к. можно отчасти понять его назначение. Это плюс для тех, кто будет смотреть и использовать вашу верстку в дальнейшем.

В следующей статье расскажу про интересные жирные шрифты, которые мне удалось найти.

font-weight - жирный текст | CSS справочник

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

12.0+ 4.0+ 1.0+ 2.0+ 3.5+ 1.3+

Описание

CSS свойство font-weight позволяет указать, насколько жирным будут выглядеть текст. Как вы знаете, жирный текст выглядит темнее и немного толще, чем обычный. Вы можете использовать жирный текст для любого тега, задав свойству значение

bold.

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

Для свойства font-weight предусмотрены также два относительных значения: bolder и lighter. Они сделают текст более или менее плотным по сравнению с унаследованным значением. Эти значения используются редко, так как немногие шрифты поддерживают столь слабые различия в плотности.

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

Значение по умолчанию: normal
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS1
Синтаксис JavaScript: object.style.fontWeight="900"

Синтаксис

font-weight: normal|bold|bolder|lighter|число|inherit;

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

Значение Описание
normal Определяет стандартное написание символов.
bold Задает жирное начертание символов в тексте.
bolder Тоже самое, что и bold.
lighter тоже самое, что и normal.
100
200
300
400
500
600
700
800
900
Определяет толщину шрифта по заданному значению, от 0 до 500 - стандартное начертание шрифта, от 600 до 900 - жирное начертание.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

Следите за изменением шрифта.

div {
font-weight: normal;

}

Делаем текст жирным с помощью CSS и HTML

В HTML жирный текст можно сделать несколькими способами. К ним относятся:

  • Тег <b>;
  • Тег <strong>;
  • CSS-свойство font-weight.

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

Жирный текст: тег <b>

Тег b HTML применяется следующим образом:

<b>Конструктор сайтов "Нубекс"</b>

Для тега <b> обязательно наличие закрывающего </b>, и ему доступны универсальные атрибуты (такие как class, id, title и т.д.)

Хотя валидность тега b и не осуждается спецификацией HTML, более актуальным в использовании является тег strong, давайте разберемся почему.

Жирный текст: тег <strong>

Согласно спецификации HTML, тег b служит для выделения текста жирным шрифтом. В отличие от него, тег strong HTML служит для выделения

важных фраз, слов, которые являются ключевыми для данной страницы.

Этот тег имеет весомое значение при ранжировании страниц в поисковой выдаче, поэтому он широко используется в продвижении сайтов и при SEO-оптимизации. Поисковые системы учитывают текст, заключенный в теги <strong></strong>, и помечают его именно как важный.

Используется тег strong аналогичным образом:

<strong>Конструктор сайтов "Нубекс"</strong>

Вы можете заметить, что внешне применение тегов <b> и <strong> совсем не отличается (поскольку все современные браузеры интерпретируют их практически одинаково), но семантические различия в коде для поисковых систем, всё-таки, имеют место быть. Поэтому большинство SEO-оптимизаторов рекомендуют использовать тег strong.

Жирный текст при помощи CSS

Мы уже отмечали важность тега strong при поисковом продвижении, но что делать в случае, если нужно выделить большое количество текста жирным (но текст не нужно помечать для поисковиков как важный), или необходимо управлять степенью "жирности" шрифта? В таких случаях используется CSS-свойство

font-weight. Применяется оно следующим образом:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Жирный текст с помощью CSS - "Нубекс"</title>
  <style>
   .nubex1 {
    font-weight: bold;
   }
   .nubex2 {
    font-weight: bolder;
   }
   .nubex3 {
    font-weight: 600;
   }
  </style>
 </head>
 <body>
  <center>
   <p>Наши сайты - это, действительно, <span>огромный шаг</span> в веб-разработке.</p>
   <p>Мы делаем по-настоящему <span>качественные</span> сайты.</p>
   <p>Доверьтесь нам, и мы вас <span>не подведем</span>.</p>
  </center>
 </body>
</html>

Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.

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

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

Жирный шрифт тегом strong

Этот способ подойдет, если вы хотите выделить жирным шрифтом важную часть текста. HTML тег <strong> является тегом логического форматирования и его суть: "подчеркнуть" важность выделенного фрагмента.

В HTML есть и другие теги логического форматирования. Например, тег <em> выделяет текст курсивом и указывает на акцентирование внимания на выделенной фразе.

Другие виды выделения текста описаны в статье: Теги форматирование текста в HTML.

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

Пример как сделать жирный шрифт HTML тегом <strong>:

<p>Обычный текст <strong>выделенный важный фрагмент текста</strong>. Обычный текст.</p>

Жирный текст с помощью тега b

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

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

<p>Обычный текст <b>текст жирным шрифтом</b>. Обычный текст.</p>

Выделение жирным стилями CSS

Жирный текст можно сделать не только с помощью специальных HTML тегов. Добиться вывода жирным шрифтом можно на любом теге задав ему свойство font-weight: bold; (работает не для всех шрифтов).

Такое выделение будет нести стилистический характер, не добавляя выделенному тексту логического веса.

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

Свойство CSS внутри атрибута style:

<p>Текст жирным шрифтом.</p>

Класс CSS:

<style>
.bold_text {
    font-weight: bold;
}
</style>
	
<p>Текст жирным шрифтом.</p>
<p>Текст обычным шрифтом.</p>
<p>Текст жирным шрифтом.</p>

Что делать, если выделить текст жирным не получается

Если выделить текст жирным не получается, скорее всего на вашем сайте переопределены CSS стили элементов. В таком случае, вам придется откорректировать эти стили. В большинстве случаев это можно будет сделать через основной файл таблиц стилей CSS. Если вы в этом не разбираетесь, обратиться к веб-мастеру. С большой долей вероятности на решение этой проблемы потребуется не более 5-ти минут работы (хотя, конечно же, могут быть исключения).

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

В этой статье представлены способы, позволяющие использовать полужирный шрифт в 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/CSS?



Я новичок в веб-программировании, и у меня есть несколько очень простых вопросов.

Я пытаюсь выделить жирным шрифтом несколько слов в одном абзаце, но не знаю, как это сделать с помощью HTML/CSS.. Как я могу выделить жирным шрифтом одно слово, например "bold" в моем примере?

Это выделяет жирным шрифтом целый абзац:

<html>
<head>
<style type="text/css">
p.n1
{
    font:15px bold 30px Georgia,serif;
}

</style>
</head>

<body>
<p>I am in bold. </p>
</body>
</html>
html css paragraph
Поделиться Источник user1111042     30 января 2012 в 01:26

7 ответов




41

<p><strong>This is in bold.</strong> This is not.</p>

Вы можете найти Mozilla Developer Network очень удобным и надежным справочником.

Поделиться Mike Hofer     30 января 2012 в 01:32



12

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

При желании стилизовать определенный раздел абзаца используйте тег span.

<p><span>Andy Warhol</span> (August 6, 1928 - February 22, 1987) 

was an American artist who was a leading figure in the visual art movement known as pop 

art.</p>

Энди Уорхол (6 августа 1928 - 22 февраля 1987) - американский художник, который был ведущей фигурой в движении визуального искусства, известном как поп-арт.

Как показывает код, стили тегов span для указанных слов: "Andy Warhol". Вы можете дополнительно стилизовать слово, используя любые коды стиля шрифта CSS.

{font-weight; font-size; text-decoration; font-family; margin; color}, etc. 

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

Поделиться Michael Anderson - NinjaSush3     20 апреля 2013 в 07:33



6

<p><b> BOLD TEXT </b> not in bold </p>;

Включите текст, который вы хотите выделить жирным шрифтом между <b>...</b>

Поделиться user1177371     30 января 2012 в 05:38




4

если вы хотите просто "bold", ответ Майка Хофера в основном правильный.

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

p strong {
    font-weight: normal;
    font-style: italic;
}

Теперь ваш "bold" курсивом 🙂

Поэтому старайтесь использовать теги по их значению, а не по стилю по умолчанию.

Поделиться Rodrigo     30 января 2012 в 02:01



3

<style type="text/css">
p.boldpara {font-weight:bold;}
</style>
</head>

<body>
<p>Stack overflow is good site for developers. I really like this site </p>

</body>

</html>

http://www.tutorialspoint.com

Поделиться swati16     12 августа 2012 в 05:49



1

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

  1. Создайте класс для выделения любого элемента жирным шрифтом. Таким образом, для текста абзаца это будет
span.bold(This name can be anything do not include parenthesis) {
   font-weight: bold;
}
  1. В вашем html вы можете получить доступ к этому классу, например, с помощью тегов span и добавления класса, выделенного жирным шрифтом, или любого другого имени, которое вы выбрали

Поделиться coletrain     30 января 2012 в 03:56



1

Добавить тег <b>

<p> <b> I am in Bold </b></p>

Для получения дополнительных тегов форматирования текста нажмите здесь

Поделиться mee     10 июля 2015 в 06:44


Похожие вопросы:


Изменить (жирным шрифтом) все слова перед определенным словом

У меня есть список из почти 1000 наград, которые должны появиться на сайте. Каждая награда находится в своем собственном диапазоне и соответствует формату x for y пример: <span>Broadcast Film...


MigraDoc-выделенный жирным шрифтом определенный текст в абзаце

В MigraDoc, если у меня есть абзац, как я могу выделить жирным шрифтом только какой -то текст в абзаце, а не весь абзац? Редактировать: Ниже приведен типичный код, который я бы использовал для...


Часть слова жирным шрифтом в настройки

Как я могу сделать часть слова жирным шрифтом в reStructuredText? Вот пример того, что мне нужно: .rst означает r e s tructured t ext.


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

У меня есть приложение, написанное на C# для компактной платформы (3.5). Я пытаюсь отобразить какой-то текст на форме жирным шрифтом. Класс Label не дает мне возможности выделять жирным шрифтом мой...


jQuery-выделите жирным шрифтом все слова в запросе

У меня есть большой документ HTML, книга, и мне нужно выделять жирным шрифтом каждое появление Toronto. Как это делается в jQuery?


Android - не может выделять жирным шрифтом больше одного слова в edittext

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


Как я могу динамически выделять жирным шрифтом первые два слова в абзаце?

Как я могу динамически выделять жирным шрифтом первые два слова в абзаце? Я пытаюсь выделить жирным шрифтом первые два слова в абзаце, что я могу сделать ? за это Использование HTML Javascript Css...


Как BOLD определенные слова в NSString абзаце

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


Можно ли выделить жирным шрифтом часть слова в Slack (Linux)?

Можно ли выделять жирным шрифтом часть слова в Slack Chat? Пример : Stack Overflow . Я использую Ubuntu 18.04 и версию Linux slack. Использование построителя сообщений и значения unicode \u000b,...


Использование docx4j для выделения жирным шрифтом слова в абзаце

Я пытаюсь сгенерировать простой текст, подобный этому, с помощью Java в документ docx This is **bold** test Я ищу в интернете эту часть кода, которая будет близкой, однако она выделяет жирным...

CSS свойство зазора


Пример

Установите зазор между строками и столбцов равным 50 пикселей:

.grid-container {
пробел: 50 пикселей;
}

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

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

Зазор Свойство определяет размер разрыв между строками и столбцов. Это сокращение от следующие свойства:

Примечание: Свойство gap ранее называлось Крестьянка .

Значение по умолчанию: нормальный нормальный
Унаследовано: нет
Анимируемый: да. Прочитать о animatable Попробуй
Версия: Модуль выравнивания блока CSS, уровень 3
Синтаксис JavaScript: объект .style.gap = "50px 100px" Попробуй

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

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

Объект
разрыв (в несколько столбцов) 66 16 61 Не поддерживается 53
зазор (в сетке) 66 16 61 10,1 53
зазор (в Flexbox) 84 84 63 Не поддерживается 70


Синтаксис CSS

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

Значение Описание Играй
междурядье Устанавливает размер зазора между строками в макете сетки Играй »
колонна-зазор Устанавливает размер зазора между столбцами в макете сетки. Играй »

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

Пример

Установите зазор между строками на 20 пикселей и столбцами на 50 пикселей:

.сетка-контейнер {
gap: 20px 50px;
}

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

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

Учебник

CSS: Макет сетки CSS

Ссылка CSS: свойство row-gap

Ссылка CSS: свойство column-gap



font-weight - CSS: каскадные таблицы стилей

Свойство font-weight CSS устанавливает насыщенность (или полужирность) шрифта. Доступные веса зависят от установленного в настоящее время семейства шрифтов .

 
шрифт: нормальный;
font-weight: жирный;


font-weight: светлее;
font-weight: жирнее;


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: начальный;
вес шрифта: вернуться;
font-weight: не установлено;
  

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

Значения

нормальный
Нормальная толщина шрифта.То же, что 400 .
полужирный
Полужирный шрифт. То же, что и 700 .
прикуриватель
На один относительный вес шрифта легче, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
полужирный
На один относительный вес шрифта тяжелее родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.
<номер>
<число> , значение от 1 до 1000 включительно. Более высокие числа обозначают веса, которые жирнее (или жирнее) меньшие числа. Некоторые часто используемые значения соответствуют общим именам весов, как описано в разделе «Сопоставление общих имен весов» ниже.

В более ранних версиях спецификации font-weight свойство принимает только значения ключевых слов и числовые значения 100, 200, 300, 400, 500, 600, 700, 800 и 900; неизменяемые шрифты действительно могут использовать только эти установленные значения, хотя мелкие значения (например.г. 451) будет преобразовано в одно из этих значений для неизменяемых шрифтов с использованием системы резервных весов.

CSS Fonts Level 4 расширяет синтаксис, чтобы принимать любое число от 1 до 1000, и вводит переменные шрифты, которые могут использовать этот гораздо более мелкий диапазон веса шрифта.

Резервные веса

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

  • Если заданный целевой вес находится между 400 и 500 включительно:
    • Ищите доступные веса между целевым значением и 500 в порядке возрастания.
    • Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.
    • Если совпадений не найдено, ищите доступные веса больше 500 в порядке возрастания.
  • Если задан вес меньше 400 , ищите доступные веса меньше целевого в порядке убывания. Если совпадений не найдено, ищите доступные веса, превышающие целевой, в порядке возрастания.
  • Если задан вес больше 500 , ищите доступные веса больше целевого в порядке возрастания.Если совпадений не найдено, ищите доступные веса меньше целевого в порядке убывания.

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

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

Обратите внимание, что при использовании относительного веса учитываются только четыре веса шрифта: тонкий (100), нормальный (400), полужирный (700) и жирный (900). Если у семейства шрифтов больше доступных весов, они игнорируются при расчете относительного веса.

Унаследованное значение полужирный Зажигалка
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 примерно соответствуют следующим общим названиям весов (см. Спецификацию OpenType):

Значение Общее название массы
100 Тонкий (волосяной покров)
200 Extra Light (Ультра легкий)
300 Свет
400 Обычный (Обычный)
500 Средний
600 Полужирный (Demi Bold)
700 Полужирный
800 Extra Bold (Ультра жирный)
900 Черный (тяжелый)
950 Extra Black (Ультра-черный)

Вариативные шрифты

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

Для шрифтов с переменной шириной TrueType или OpenType вариант «wght» используется для реализации различной ширины.

Для работы приведенного ниже примера вам понадобится браузер, поддерживающий синтаксис CSS Fonts Level 4, в котором font-weight может быть любым числом от 1 до 1000.

HTML
  <заголовок>
    
    

.… было бы нехорошо встретить мегалозавра, длиной около сорока футов, который ковыляет, как слоновая ящерица, по Холборн-Хилл.

CSS
 

@ font-face {
  src: url ('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
  семейство шрифтов: 'MutatorSans';
  стиль шрифта: нормальный;
}

этикетка {
  шрифт: 1rem моноширинный;
  белое пространство: nowrap;
}

.container {
  максимальная высота: 150 пикселей;
  переполнение-у: авто;
}

.образец {
  преобразование текста: прописные буквы;
  шрифт: 1.5rem 'MutatorSans', без засечек;
}
  
JavaScript
  пусть weightLabel = document.querySelector ('label [for = "weight"]');
let weightInput = document.querySelector ('# вес');
let sampleText = document.querySelector ('. sample');

function update () {
  weightLabel.textContent = `вес шрифта: $ {weightInput.value};`;
  sampleText.style.fontWeight = weightInput.value;
}

weightInput.addEventListener ('ввод', обновление);

Обновить();
  

Люди с ослабленным зрением могут испытывать трудности с чтением текста, для которого установлено значение веса шрифта , равное 100 (тонкие / тонкие) или 200 (сверхлегкие), особенно если шрифт имеет низкую контрастность цвета. .

Установка толщины шрифта

HTML
  

Алисе стало очень надоедать сидеть рядом с сестрой на банка, и от того, что ей нечего делать: раз или два она заглянула в книга, которую читала ее сестра, но в ней не было ни картинок, ни разговоров на «а что толку от книги», - подумала Алиса, - без картинок или разговоры? "

Я тяжелый
Я легче
CSS
 
п {
  font-weight: жирный;
}


div {
 font-weight: 600;
}


охватывать {
  font-weight: светлее;
}  
Результат

таблиц BCD загружаются только в браузере

HTML: 3 способа сделать текст жирным в CSS

В этом руководстве вы научитесь выделять текст жирным шрифтом в CSS тремя способами.

В большинстве случаев вы будете использовать ключевое слово полужирный, чтобы выделить шрифт жирным шрифтом с помощью свойства font-weight . Но если вы хотите применить разную степень полужирности, вы можете использовать число, кратное 100.

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

1. Использование свойства CSS font-weight в разделе Head

Для font-weight вы указываете число, определяющее жирность шрифта: normal, bold, жирный, светлый или кратный 100 от 100 до 900 , 400 соответствует нормальному.Более жирный и светлый оттенки относятся к родительскому элементу.

Синтаксис для font-weight

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

Как указать font-weight

 font-weight: 700;
font-weight: жирный; / * то же, что 700 * /
шрифт: нормальный; / * то же, что и 400 * /
font-weight: светлее; / * относительно родительского элемента * / 

CSS for Class in Head Section

  

HTML

 

Этот абзац полностью выделен жирным шрифтом.

Вывод

  Этот абзац полностью выделен жирным шрифтом.  

2. Использование элемента

Поместите элемент между элементом абзаца, чтобы выделить определенную часть абзаца жирным шрифтом.

HTML

 

Некоторая часть абзаца выделена жирным шрифтом .

Вывод

 Некоторая часть абзаца  выделена жирным шрифтом . 

3. Использование элемента

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

HTML

 

Некоторая часть абзаца выделена жирным шрифтом с использованием сильного элемента .

Вывод

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

Полный пример

 



    <стиль>
        .жирный текст {
            font-weight: жирный;
        }
    



    

Примеры: выделение текста жирным шрифтом в CSS

Использование класса CSS

Этот абзац полностью выделен жирным шрифтом.

Использование элемента b

Некоторая часть абзаца выделена жирным шрифтом .

Использование сильного элемента

Некоторая часть абзаца выделена жирным шрифтом с использованием сильного элемента .

Вывод

Как показано на избранном изображении в этой статье.

См. Также:

Как выделить текст полужирным шрифтом с помощью CSS?

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

Мы будем использовать свойство CSS font-weight, чтобы сделать содержимое жирным. У нас есть множество вариантов для установки уровня толщины нашего текста.

  • normal: Это нормальный шрифт. Это то же самое, что 400, числовое значение по умолчанию для жирности.
  • жирный: Это жирный шрифт. Это то же самое, что и 700.
  • полужирный: Устанавливает жирность шрифта более жирным, чем родительский элемент.
  • светлее: Устанавливает вес шрифта легче, чем родительский элемент.
  • : Значение от 1 до 1000 включительно (в порядке возрастания уровня жирности).

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

Родительское значение легче жирнее
100 100 400
200 100 400
300 100 400
400 100 700
500 100 700
600 400 900
700 400 900
800 700 900
900 700 900

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

HTML

< html >

< голова >

стиль

стиль type = "text / css" >

h3 {

font-weight: 700;

цвет: зеленый;

}

.текст {

font-weight: жирный;

}

стиль >

головка >

< корпус > 9000

< h3 >

Добро пожаловать в компьютерные компьютерщики для компьютерных фанатов

h3 >

< p класс = «текст» >

Портал компьютерных наук для вундеркиндов

p >

body >

html >

Вывод:


Пример 2: В следующем примере показано несколько простых текстов, представленных с использованием других свойств font-weight.

HTML

< html >

< корпус >

html style = "font-weight: bold;

text-decoration: underline;">

Мысль дня

h3 >

< p style = "font-weight: lighter;" >

Хороший программист - это тот, кто

всегда смотрит в обе стороны

< span style = "font-weight: 900; " >

перед пересечением дороги с односторонним движением.

пролет >

p >

корпус >

html >

Вывод:

свойство font-weight

Поддерживаемый браузер:

  • Google Chrome 2.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 3.5
  • Safari 1.3

Введение в вес шрифта HTML / CSS

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

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

Если вы хотите попробовать это самостоятельно, скопируйте код и вставьте его в текстовый редактор, например Блокнот или Блокнот ++. Мы сделаем жирность шрифта «жирным».

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


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: red;
font-weight: жирный;
шрифт: 18px Arial, Helvetica, без засечек;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Это взаимодействие кода HTML и CSS показано на следующем рисунке:

Результат на вашей веб-странице следующий.Обратите внимание на текст BOLD .

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

Что нужно знать об использовании числовых значений

Хотя на самом деле существуют следующие числовые значения, которые вы можете использовать для определения «жирности» отображаемого текста: 100, 200, 300, 400, 500, 600, 700, 800 и 900, фактический результат будет зависеть от того, какой шрифт вы используете в своем CSS.

Не каждый веб-шрифт или «семейство шрифтов» изначально создавалось с множеством вариантов, выделенных жирным шрифтом. Для большинства семейств шрифтов на самом деле доступно лишь несколько значений толщины. Это означает, что при указании веса, для которого не существует грани, будет использоваться грань с соседним весом.

Числовые значения следующие:

  • 100 - Тонкий
  • 200 - Extra Light (Ультра легкий)
  • 300 - Light
  • 400 - Обычный
  • 500 - Средний
  • 600 - Полужирный (Demi Bold)
  • 700 - Полужирный
  • 800 - Extra Полужирный (Ultra Bold)
  • 900 - Черный (жирный)

Вот несколько примеров различных значений начертания шрифта:

Примечание: Мы будем использовать семейство шрифтов : Helvetica, Arial, sans-serif; для этой демонстрации.

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

Сценарии использования

Когда дело доходит до стиля, будут моменты, когда вы захотите либо выделить свой текст, либо сделать его менее заметным.

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

Например:


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: grey;
font-weight: 100;
размер шрифта: 18 пикселей;
семейство шрифтов: Arial, Helvetica, sans-serif;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Веб-результат использования числового шрифта 100 будет выглядеть следующим образом:

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

Например:


< html >
< head >

< style type = text / css>

/ * Styles * /

p {
color: grey;
font-weight: 900;
размер шрифта: 18 пикселей;
семейство шрифтов: Arial, Helvetica, sans-serif;
}

style >
head >

< body >

< p > Udacity - это место, где вы можете узнать о толщине шрифта p >

body >
html >

Веб-результат использования числового шрифта 900 будет выглядеть следующим образом:

В мире веб-создания разные браузеры иногда могут давать разные результаты.

Давайте проверим это. Мы будем использовать следующий код для примера:




Udacity - это то место, где вы можете узнать о толщине шрифта


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

Outro: (Куда дальше?)

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

Зарегистрируйтесь сегодня в нашей программе «Введение в программирование Nanodegree»!

Начать обучение

CSS - вес шрифта

CSS - вес шрифта

font-weight

Вернуться к оглавлению.

Тонкая проблема совместимости: где именно в диапазоне 100-900 светлее начинает генерировать жирный текст?

font-weight предназначен для установки жирности (жирности) шрифта. нормальный - значение по умолчанию.

Проблема здесь в том, что у самого шрифта должна быть одна или несколько толщин. Если его нет, вы вообще не можете выделить его жирным шрифтом.

Если вам нужен полностью безопасный вес, просто используйте font-weight: bold и принимайте все, что вам дает браузер.

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

font-weight: 400 должно быть равно нормальному , а 700 равно полужирному .

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

Тестовый набор

В качестве тестового примера я использую Segoe UI для Windows и Helvetica Neue для Mac. У Segoe UI четыре веса, а у Helvetica Neue пять. Если вы видите только два веса, ваш браузер неправильно обрабатывает font-weight .

font-weight: normal смелее зажигалка
font-weight: жирный смелее зажигалка
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 смелее зажигалка

HTML полужирный

Скопируйте / вставьте коды для создания полужирного текста в HTML.

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

CSS Bold:

font-weight Свойство

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

Вот пример:

Пример текста полужирным шрифтом CSS ...

... и теперь весь абзац выделен жирным шрифтом.

Вы также можете указать «коэффициент жирности» (вместо того, чтобы просто указывать полужирным шрифтом ). Другими словами, вы можете применять разные уровни жирности к разному тексту.Кроме того, вы даже можете указать, что текст , а не должен быть полужирным. Чтобы узнать больше об этом, прочтите о свойстве font-weight .

HTML полужирный:

Тег

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

Вот пример создания полужирного шрифта HTML с использованием тега :

Пример текста жирным шрифтом HTML ...

... и теперь весь абзац выделен жирным шрифтом.

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

Итак, какой тег HTML Bold мне следует использовать?

Спецификация HTML включает несколько тегов для выделенного жирным шрифтом / выделенного / выделенного текста. Каждый тег имеет свое особое значение.

В следующей таблице перечислены рассматриваемые теги HTML:

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

,

,

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

Вот что в спецификации HTML говорится о полужирном HTML и другом выделенном / выделенном тексте:

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

до
, акцент должен использовать элемент , важность должна быть обозначена элементом , а текст отмечен или выделен следует использовать элемент

Объединение полужирного шрифта CSS и полужирного шрифта HTML

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

Comments