Выделение жирным css: html — Сделать жирным одно слово в предложении через CSS

Содержание

font-weight | htmlbook.ru

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

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

Версии CSS

Описание

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

Синтаксис

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

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

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

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

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

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

Браузеры

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

Курсив и жирный шрифт 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.

Делаем текст жирным с помощью 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/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 ответов


36

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

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

Поделиться


Mike Hofer    

30 января 2012 в 01:32


10

Я знаю, что этот вопрос старый, но я столкнулся с ним и знаю, что у других людей может быть такая же проблема. Все эти ответы хороши, но не дают должных подробностей или реальных советов 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


3

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

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

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

Теперь ваш «bold» курсив 🙂

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

Поделиться


Rodrigo    

30 января 2012 в 02:01

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

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

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

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


3

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

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

Поделиться


user1177371    

30 января 2012 в 05:38


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 и добавив класс bold или любое другое имя, которое вы выбрали

Поделиться


coletrain    

30 января 2012 в 03:56


1

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

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

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

Поделиться


mee    

10 июля 2015 в 06:44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как использовать жирный шрифт 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» , подготовленная редакцией проекта.

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

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

(Пропустите этот абзац для TL; DR …)Я использую шрифт Gotham с сайта cloud.typography.com, и у меня есть кнопки, которые начинаются пустыми (с белой рамкой / текстом и прозрачным фоном) и приобретают цвет фона при наведении курсора. Я обнаружил, что некоторые цвета фона, которые я использовал, плохо контрастировали с белым текстом, поэтому я хотел изменить текст на черный для этих кнопок, но — из-за визуального трюка или обычных методов сглаживания — темный текст на светлом фоне всегда кажется более светлым, чем белый текст на темном фоне. Я обнаружил, что увеличение веса темного текста с 400 до 500 обеспечивает почти такой же «визуальный» вес. Тем не менее, он увеличивал ширину кнопки на крошечную величину — доли пикселя — но этого было достаточно, чтобы кнопки выглядели слегка «дрожащими», от чего я хотел избавиться.

Решение:

Очевидно, что это действительно привередливая проблема, поэтому ее нужно было решить. В конечном итоге я использовал негатив letter-spacingдля более жирного текста, как рекомендовал cgTag выше, но 1px был бы излишним, поэтому я просто рассчитал именно ту ширину, которая мне нужна.

Изучив кнопку в Chrome devtools, я обнаружил, что ширина моей кнопки по умолчанию была 165,47 пикселей, а при наведении — 165,69 пикселей, разница 0,22 пикселей. На кнопке было 9 символов, поэтому:

0,22 / 9 = 0,024444 пикселей

Преобразуя это в em-единицы, я мог сделать настройку независимой от размера шрифта. Моя кнопка использовала размер шрифта 16 пикселей, поэтому:

0,024444 / 16 = 0,001527эм

Итак, для моего конкретного шрифта следующий CSS сохраняет кнопки точно такой же ширины при наведении курсора:

.btn {
  font-weight: 400;
}

.btn:hover {
  font-weight: 500;
  letter-spacing: -0.001527em;
}

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

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

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

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

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

Обычный текст.

Жирный текст.

Жирный текст strong.

Обычный текст.

Жирный текст.

Жирный текст strong.

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

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

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

Пример жирного текста.

Пример текста с жирным словом.

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

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

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

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


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

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

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

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

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

strong {
font-weight: bold;
}

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

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

Жирными буквами текст в Microsoft Word можно написать несколькими способами.

Как в Ворде писать слова жирными буквами?

Для этого необходимо либо перед написанием текста нажать на соответствующую клавишу для жирного текста, либо выделить уже написанный текст и нажать на клавишу для оформления текста. На верхней панели инструментов, нажать на кнопку с буквой «Ж». Правой клавиши мыши нажать на «лист» в Microsoft Word.

В выпадающем меню выбрать кнопку с буквой «Ж». Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги. Ну этот вопрос не должен заставить долго мучаться. Вам нужно открыть документ Ворд и обратить внимание на верхнюю панель. Там вы сможете сразу же увидеть значок с буквой «ж». Так вот нажав на данный значок, вы и получите жирный шрифт.

Кстати жирным шрифтом можно сделать уже напечатанный текст, выделив его и нажав на «ж». Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda. Понять, активирована эта кнопка или нет, можно легко: Также можно выделить жирным шрифтом какой — то текст можно потом, после написания ядом этого выделяете нужный текст и жмете на ту же кнопку — «Ж».

Сделать жирный шрифт в Microsoft Word очень просто. В начале нужно написать текст, затем его выделить и нажать кнопку Ж на верхней панели. Рядом также есть буквы К — курсив и Ч — подчеркивание чертой.

И еще, можно сразу нажать на букву Ж и тогда печать сразу пойдет жирным шрифтом, не потребуется выделения текста. Главное запомнить расположение буквы Ж на панели и тогда печать жирного текста не составит труда. После этого начинайте печатать — текст будет жирным. Если уже набрали текст и его нужно сделать жирным, то просто выделяем нужные слова или фрагмент текста, после чего жмем по этому же значку — готово! Самый очевидный способ — это выделить нужную часть текста и нажать сверху кнопку Ж.

Она есть в верхнем меню во всех версиях Ворда, даже в онлайновой. Я лично пользуюсь клавиатурной командой. В текстовом редакторе «Microsoft Word» по простому в Ворде писать слова жирным шрифтом можно таким образом — напанели инструментов нажать на черную букву Ж и писать слова — они сразу будут выделяться.

Если вы у нас впервые: Как в Ворде писать слова жирными буквами? Расположение кнопки «жирный текст» для Microsoft Word Вне зависимости от версии года выпуска пакета MS Office, а соответственно и программы Word, наиболее быстрым и эффективным способом, который поможет сделать введённый текст жирным является следующие шаги: Для этого нужно будет активировать кнопку «Ж», которая находится рядом с кнопками «К» курсив и «Ч» подчеркивание в верхней панели Worda: Для того, чтобы написать в Ворде жирными буквами, нужно: Или в верхней части экрана нажать на закладку «Главное» и нажать на «Ж».

Выделение текста полужирным шрифтом — Word

Выделить строку, и нажать букву Ж-т. Можно просто сначала нажать Ж, и писать. Можно ли и как определить название шрифта — на сайте, в тексте, программе? Как настроить размер шрифта в Rambler-почте? Как на БВ увеличить шрифт? Какой нужен шрифт в Ворде для высоты строки 0. Как сделать жирный шрифт, чтобы выделить фрагмент текста на БВ? Как увеличить шрифт в Google Chrome?

Как увеличить шрифт в Опере? Как увеличить шрифт в Интернет Эксплойере? Как увеличить шрифт в Мозилле? Задайте его нашему сообществу, у нас наверняка найдется ответ! Делитесь опытом и знаниями, зарабатывайте награды и репутацию, заводите новых интересных друзей! Задавайте интересные вопросы, давайте качественные ответы и зарабатывайте деньги.

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

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

Если вы хотите выделить текст курсивом, нажмите или щелкните на кнопке Курсив
, расположенной на панели инструментов форматирования. Когда вместо текстовых процессоров использовались пишущие машинки (давненько это было!), вместо курсива применялось подчеркивание. Курсив выглядит гораздо лучше! Он светлый и легкий, свободный и поэтичный. Я очень люблю использовать его в тексте, поскольку, на мой взгляд, он выглядит куда элегантнее, чем жалкое подчеркивание. Подчеркивание — это стиль бюрократа в припадке вдохновения.

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

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

  • Все перечисленные выше стили форматирования символов применяются к выделенному тексту. Если же вы сначала применили один из этих стилей, а потом продолжили набор текста, новый текст будет вводиться в указанном вами стиле.
  • Чтобы отменить стиль форматирования символов, используйте команду стиля еще раз. Например, если вы нажали клавиши для выделения текста курсивом, то повторное нажатие вернет вас к обычному начертанию символов.
  • Вы можете объединять различные приемы форматирования символов; например, выделить текст одновременно полужирным, подчеркиванием и курсивом. Чтобы добиться этого, нажмите соответствующие клавиши, для активизации необходимых форматов, а затем введите текст. Вы получите текст, выделенный одновременно тремя стилями, если нажмите , и . Чтобы вернуться к обычному тексту, нажмите все три комбинации еще раз.
  • Для того чтобы применить форматирование к одному-единственному слову, установите на него курсор и выполните команду форматирования. Например, если вы установили курсор на слово «символ» и нажали (или щелкнули на кнопке Курсив, расположенной на панели инструментов форматирования), все слово немедленно будет выделено курсивом.
  • Кнопки Полужирный, Курсив и Подчеркнутый на панели инструментов форматирования показывают, какой из стилей применен к тексту. Например, если курсор установлен на слово, выделенное полужирным, кнопка Полужирный выглядит «нажатой».

Разница между жирным и полужирным

Среда Windows наряду с полужирным начертанием символов предлагает пользователю особые жирные шрифты, например Ari
al Rounded MT Bold. На первый взгляд, это может показаться диким, но, поскольку мы имеем дело с компьютерами, приходится мириться с их так называемой «логикой».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Текст жирным шрифтом.

Текст жирным шрифтом.

Текст обычным шрифтом.

Текст жирным шрифтом.

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

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

августа 12, 2011

Светлана Козлова

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

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

Шаг 1.
 Печатаем наш текст

Шаг 2.
 Выделяем текст левой клавишей мыши

Шаг 3.
 Нажимаем на кнопку «Ж» (полужирный), находящуюся на верхней панели программы

Все. Шрифт выделился жирным!

Осталось щелкнуть мышью в любой части документа, чтобы это увидеть.

Жирный шрифт

На этом все, текст стал выделен жирным. Что нам и требовалось.

Комментирование и размещение ссылок запрещено.

Всем привет. Форматирование текста в Ворде – это первый инструмент, без которого вы не создадите действительно хороший, читабельный проект. Каким бы идеальным ни был ваш текст, пока он не оформлен должным образом, он остается лишь текстом. А вот качественно оформленная работа уже многого стоит. Читатели будут вам благодарны, если документ приветливо оформлен и легко читается.

Потому, давайте незамедлительно учиться форматировать символы и уже применять это в вашей практике. И так, какие есть возможности для форматирования текста? Как минимум, такие:

  1. Изменение применяемого шрифта
  2. Изменение размера символов
  3. Изменение цвета текста
  4. Выделение цветом участков текста
  5. Различные способы начертания
  6. Применение разнообразных эффектов
  7. Изменение регистра
  8. Создание надстрочных и подстрочных знаков
  9. Изменение расстояния между буквами и др.

Для выполнения таких манипуляций разработчики предусмотрели несколько способов
:

  • Применение горячих клавиш
  • Всплывающее меню
    , которое появляется после того, как вы выделили текст
  • Группа команд «Шрифт»
     на ленте
  • Диалоговое окно «Шрифт»
    , которое можно вызвать комбинацией клавиш Ctrl+D. Оно во многом дублирует команды на ленте

А теперь обо всем подробнее. Все примеры я привожу для Microsoft Word 2013, в других современных версиях функционал и интерфейс могут немного отличаться.

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

Обратите внимание, в списке названия шрифтов выглядят так, как будет выглядеть ваш текст. Удобно, не правда ли?

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

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

К слову, наиболее «читабельными» шрифтами считаются Calibri, Times New Roman, Arial, Verdana и еще несколько других.

Чтобы изменить размер символов – выделите их мышью и выберите нужный размер на ленте в группе «Шрифт». В выпадающем меню размер шрифта указывается в пунктах. Пункт – это 1/72 дюйма, то есть приблизительно 0,35 мм
. Тогда шрифт 11 пт будет высотой в 3,88 мм. Чаще всего, эти расчеты никто не использует, но иногда нужно подобрать физический размер шрифта, вот тогда и применяем приведенные соотношения.

То же самое можно сделать и в выпадающем меню.

При наведении на размер в списке, он временно применяется к введенному шрифту. Так вы сможете визуально оценить изменения до их вступления в силу.

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

Так же, можно пошагово увеличивать или уменьшать размер символов. Для этого нажимайте на ленте кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта».

Или воспользуйтесь комбинациями клавиш: Ctrl+Shift+1 для увеличения на 1 шаг, Ctrl+Shift+9 – для уменьшения.

Цвет текста часто изменяют для расстановки акцентов и выделения важных отрезков, терминов. Выделите нужный участок и нажмите стрелку возле кнопки «Цвет текста».

Можете выбрать цвет из предложенной палитры. Если вы используете цвета темы, при изменении темы, цвет текста тоже изменится. Это удобно. При наведении на цвет в палитре, текст будет окрашиваться для предварительного просмотра.

Если предложенных цветов недостаточно, нажмите «Другие цвета…» чуть ниже палитры. В открывшемся окне на вкладке «Обычные» можно выбрать из более широкого списка цветов.

Или на вкладке «Спектр» задать произвольный цвет, кликнув по нему мышью. Там же можно задать вручную соотношение RGB (красного, зеленого и синего).

Интересный эффект может дать применение градиентного цвета текста, но я в своей практике его ни разу не применил. Чтобы задать градиент, выберите цвет и нажмите «Градиентная» под палитрой. Выберите один из вариантов градиента.

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

Выделите нужный текст и нажмите на ленте «Цвет выделения текста». В открывшемся окне выберите один из вариантов цвета.

Чтобы удалить выделение – в этом же окне выберите «Нет цвета».

Под начертанием следует понимать толщину (жирность), наклон букв (курсив), подчеркивание, перечеркивание символов. Эти параметры можно задавать отдельно или вместе друг с другом. Например, полужирный курсив или подчеркнутый индекс.

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

Чтобы текст стал жирным
 – выделите его и нажмите на ленте кнопку «Полужирный». Или используйте комбинацию клавиш Ctrl+B.

Как сделать курсив

Чтобы символы были курсивными – выделите их, нажмите «Курсив», или комбинацию Ctrl+I.

Подчеркивание текста в Word

Чтобы подчеркнуть
 текст – выделите, нажмите «Подчеркнутый» или Ctrl+U.

Можно изменить форму и цвет линии подчеркивания. Для этого нажмите на стрелку возле кнопки «Подчеркнутый», выберите вид линии. Перейдите в пункт «Цвет подчеркивания», чтобы выбрать новый цвет.

Перечеркивание текста в Ворде

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

Если же вы твердо решили перечеркнуть что-то – выделите нужный текст и нажмите «Зачеркнутый».

Для придания красочности вашим трудам, используйте встроенные эффекты. Выделите не слишком красивый текст и нажмите «Текстовые эффекты и оформление».

В выпадающем меню будут некоторые «предустановленные» наборы эффектов, или же можно настроить отдельные компоненты символов:

  • Струткура
     – настраиваем контур и заливку букв
  • Тень
     – добиваемся объема за счет применения теней
  • Отражение –
    эффект отражающихся от поверхности букв
  • Подсветка –
    буквы как будто подсвечиваются сзади выбранным цветом
  • Стили чисел
     – выбираем различные способы начертания чисел (применяется редко)
  • Лигатуры
     – специальные знаки, образованные объединением двух и более символов. Часто несут определенную смысловую нагрузку или просто экономят место на листе, улучшают читаемость текста. Знаки транскрипции – отличный пример применения лигатур. Работают для группы шрифтов OpenType.

Комбинируйте эти опции, экспериментируйте с «глубокими» настройками, чтобы получить наилучший, по вашему мнению, эффект.

Всем известно: чтобы напечатать символ прописным – нужно предварительно зажать Shift. Чтобы сделать прописными несколько букв подряд – нажимают Caps Lock перед набором. Кроме того, Ворд автоматически делает прописным первый печатаемый символ после точки. А что, если нужно быстро исправить регистр в уже набранном тексте? Даже не думайте делать это вручную. Выделите участок текста для исправления, нажмите на ленте «Регистр» и выберите один из предложенных вариантов:

  • Как в предложениях
     – заглавная лишь первая буква предложения. Остальные строчные;
  • Все строчные
  • Все прописные
  • Начинать с прописных –
    у каждого слова первая буква – заглавная
  • Изменить регистр –
    сделать прописные строчными, а строчные прописными

Мне всегда хватало такого набора команд. И вам, думаю, хватит.

Если нужно сделать подстрочный символ (индекс) – выделите его и нажмите на ленте «Подстрочный знак». Или комбинацию клавиш Ctrl+=

Аналогично, для создания надстрочного знака (степень) – придется нажать «Надстрочный знак», или комбинацию Ctrl+Shift+=

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

Чтобы сделать текст более растянутым или сжатым – выделите его и нажмите Ctrl+D. В открывшемся меню «Шрифты» перейдите на вкладку «Дополнительно». Здесь найдем группу команд «Межзнаковый интервал», где можно сделать такие настройки:

  • Масштаб
     – увеличить или уменьшить масштаб отображения относительно установленного размера шрифта
  • Интервал
     – задайте расстояние в пунктах между символами
  • Смещение
     – сдвиг выделенного текста вниз или вверх относительно базовой линии (в пунктах)
  • Кернинг…
     — интеллектуальное сжатие текста для экономии места. Не выполняйте его для слишком мелкого шрифта, где буквы могут сливаться друг с другом.

Бывает, хочется скопировать форматирование, сделанное ранее, и применить его к другому участку текста. Для этого существует инструмент «Формат по образцу».

Установите курсор в текст, формат которого нужно скопировать. Нажмите «Формат по образцу» на ленте, форматирование скопируется. Слева от курсора появится изображение кисти. Выделите курсором тот участок, к которому нужно применить формат. Когда вы отпустите левую кнопку мыши – форматирование применится к нему.

Бывает, нужно «перезагрузить» форматирование, т.е. очистить формат и применить новый. Чтобы удалить форматирование – выделите нужный текст и нажмите на ленте «Удалить форматирование. Такой способ полностью очистит настройки текста

Для очистки только ручного форматирования, выделите текст и нажмите Ctrl+Пробел. При этом, форматирование стилей сохранится.

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

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

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

Пример

Для того, чтобы изменить начертание, в программе Microsoft Word есть специальные кнопки.

Полужирный (в народе его называют «жирный»)

Курсив (наклонный)

Подчеркнутый

Как изменить начертание

Сначала нужно выделить слово, которое хотите изменить. Чтобы это сделать, наведите курсор в самое его начало. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в конец слова. Когда оно закрасится другим цветом (обычно черным или синим), значит, слово выделилось.

Затем нажмите на кнопку с нужным Вам начертанием.

Можно назначить сразу несколько видов начертания сразу.

Пример

Чтобы вернуть измененную часть текста (слово) в первоначальный вид, нужно выделить ее и щелкнуть по кнопке с назначенным начертанием. Скорее всего, нужная Вам кнопка будет другого цвета – желтого или оранжевого.

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

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

Пример

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

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

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

p.thicker {
font-weight: 900;
}

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

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

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

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

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

Объект
font-weight 2,0 4,0 1,0 1,3 3,5

Синтаксис CSS

начертание шрифта: нормальный | жирный | жирный | светлее | номер | начальный | наследование;

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

.

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

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

Учебник

CSS: Шрифт CSS

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

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

Свойство шрифта CSS

Пример

Задайте некоторые свойства шрифта с помощью сокращенного объявления:

п.а
{

шрифт: 15px Arial, без засечек;
}

п.б
{

шрифт: курсив, полужирный шрифт, полужирный, 12px / 30px Georgia, serif;
}

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

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

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

Шрифт Свойство является сокращенным свойством для:

Значения font-size и font-family являются обязательными. Если одно из других значений
отсутствует, используются их значения по умолчанию.

Примечание: Свойство line-height устанавливает расстояние между строками.

Значение по умолчанию: Значение свойств шрифта по умолчанию
Унаследовано: да
Анимируемый: да, посмотреть отдельные свойства . Читать о animatable
Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.font = «курсив, полужирный шрифт, полужирный шрифт, шрифт 12px, шрифт без засечек»
Попытайся

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

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

Объект
шрифт 1,0 4,0 1,0 1.0 3,5

Примечание: См. Поддержку каждого значения в отдельном браузере ниже.

Синтаксис CSS

font: font-style font-option font-weight font-size / line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | наследовать;

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

Имущество / Стоимость Описание
стиль шрифта Задает стиль шрифта.Значение по умолчанию — «нормальный»
вариант шрифта Задает вариант шрифта. Значение по умолчанию — «нормальный»
font-weight Задает толщину шрифта. Значение по умолчанию — «нормальный»
размер шрифта / высота строки Задает размер шрифта и высоту строки. Значение по умолчанию — «нормальный»
семейство шрифтов Задает семейство шрифтов.Значение по умолчанию зависит от браузера
подпись Использует шрифт, который используется элементами управления с субтитрами (например,
кнопки, выпадающие списки и т. д.)
значок Использует шрифт, который используется в ярлыках значков.
меню Использует шрифты, которые используются в раскрывающихся меню.
окно сообщений Использует шрифты, используемые диалоговыми окнами
с мелкими подписями Уменьшенная версия шрифта подписи
строка состояния Использует шрифты, которые используются в строке состояния
начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный
унаследовать Наследует это свойство от своего родительского элемента. Читать про унаследовать

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

Пример

Демонстрация некоторых других значений свойств шрифта.

Шрифт браузера, используемый в элементах управления с субтитрами.

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

Шрифт браузера, используемый в раскрывающихся меню.

Шрифт браузера, используемый в диалоговых окнах.

Уменьшенная версия шрифта заголовка.

Шрифт браузера, используемый в строке состояния. < / п>

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

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

Учебник

CSS: Шрифт CSS

Ссылка на HTML DOM: свойство шрифта

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

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

 
шрифт: нормальный;
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) будет преобразовано в одно из этих значений для неизменяемых шрифтов с использованием системы весов Fallback.

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 вы указываете число, определяющее жирность шрифта: нормальный, полужирный, полужирный, светлее или кратные 100 от 100 до 900 , 400 соответствует нормальному.Более жирный и светлый оттенки относятся к родительскому элементу.

Синтаксис для 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 Bold: Руководство по использованию Font-Weight

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

Как разработчики, собирая верстку веб-сайта, мы иногда хотим привлечь внимание к чему-то. Есть несколько способов сделать это. Самый простой способ — увеличить font-weight текста, который вы хотите выделить. Это относится к выделению текста жирным шрифтом.

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

CSS Bold: A Guide

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

Найдите свой Bootcamp Match

Относительный вес шрифта Фактический вес шрифта
тонкий 100
нормальный 400
жирный 700
Heavy 900

font-weight: normal смелее зажигалка
font-weight: жирный смелее зажигалка
font-weight: 100 смелее зажигалка
font-weight: 200 смелее зажигалка
font-weight: 300 смелее зажигалка
вес шрифта: 400 смелее зажигалка
font-weight: 500 смелее зажигалка
font-weight: 600 смелее зажигалка
font-weight: 700 смелее зажигалка
вес шрифта: 800 смелее зажигалка
вес шрифта: 900 смелее зажигалка