Полужирное начертание в css: font-weight | CSS | WebReference

Начертание полужирное в css

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

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

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

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

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

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:

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

p { font-style: italic; }

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

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

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

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

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

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

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

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

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:

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

p { font-style: italic; }

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

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

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

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

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

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами , то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

Заключение

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

Работаем с насыщенностью шрифтов в CSS

Большинство шрифтов, которые мы используем, представлены в нескольких уровнях насыщенности. Самая распространенная градация: нормальное начертание (normal) и полужирное начертание (CSS bold). В этой статье я хочу познакомить вас с различными уровнями насыщенности шрифтов, доступными в CSS.

Объявление насыщенности в CSS

В CSS предусмотрены различные значения насыщенности, которые можно применять к шрифтам (конечно же, если они представлены в семействе шрифтов):

• Вы будете сталкиваться с различными описаниями этих уровней, так как на данный момент не существует единых и универсальных названий и значений для них;
• Если нужно добиться более точных настроек насыщенности шрифтов, то я не рекомендую использовать относительные значения плотности (то есть lighter или bolder), а вместо них использовать числовые значения;
• В типографике каждый уровень насыщенности представляет собой отдельный шрифт, разработанный печатником. Из наиболее распространенных шрифтов для веб-страниц, лишь некоторые позволяют изменять уровни насыщенности (зачастую они представлены лишь в значениях 400 и 700, а во многих случаях только 400).

Что будет, если уровень насыщенности отсутствует?

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

Фальшивое жирное начертание:

Если в семействе шрифтов отсутствует указанный уровень насыщенности, некоторые браузеры могут изменять внешний вид текста ради выдержки стилизации. То есть, попытаются самостоятельно сгенерировать новый CSS font style bold. Этого лучше избегать, так как это может привести к неожиданным результатам в различных браузерах.

Можно воспользоваться свойством font-synthesis, предусмотренным в CSS3. Оно отвечает за то, разрешено ли браузеру самостоятельно синтезировать полужирный стиль в тех случаях, когда семейство шрифтов выглядит как полужирный текст. Ниже представлен пример использования этого свойства:

/* запрещаем браузеру синтезировать полужирный стиль шрифта */ font-synthesis: none;

Прежде чем использовать о font-synthesis в своих проектах, проверьте браузерную совместимость.

Вопросы и ответы

Я думаю, что стоит сразу же ответить на вопросы, которые могут возникнуть:

Почему свойство font-weight принимает лишь девять числовых значений?

Эти девять значений позволяют охватить все традиционные типографские уровни насыщенности.

Почему бы не использовать строчные значения (CSS font weight bold)для указания насыщенности в CSS?

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

Почему числовые значения насыщенности в CSS начинаются с 100, а не с 1?

Шрифтовая шкала 100-900 продиктована форматом шрифта TrueType, в котором 400 – это регулярный стиль (то есть, базовый). Такая же шкала используется в CSS и в формате OpenType.

Перевод статьи “How To Fine-Tune Your Font Weights In CSS?” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Перевод font%20weight на русский, словарь английский

A logical font is generated from a description of a user’s requirements for a font.

Логический шрифт создается по перечню требований пользователя к шрифту.

Literature

They were hidden in other designs, but they had the same font.

Они были спрятаны в других татуировках, но у них одинаковый шрифт.

OpenSubtitles2018.v3

Okular is currently generating bitmap fonts which are needed to display your document. For this, Okular uses a number of external programs, such as MetaFont. You can find the output of these programs later in the document info dialog

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

KDE40.1

You know what it’s like to have date night ruined because Google changed their font?

Вы знаете какого это, когда вечер свиданий отменяется из-за того, что Гугл сменил шрифт?

OpenSubtitles2018.v3

The system generates an internal font for each input document based on well printed characters using a dynamic adjustment (adaptation) to the specific input symbols.

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

WikiMatrix

And Vic grinning as he raised his face from the last font of vital energy, at the base of her spine.

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

Literature

You know, the standing joke that graphic designers can’t see historical movies because the fonts are always wrong is certainly true.

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

OpenSubtitles2018.v3

She says the ‘Results Not Typical’ disclaimer on our posters of Eulayla needs to appear in much larger font.

Она сказала, дисклеймер «Результат не гарантирован» на плакатах Юлайлы нужно писать более крупным шрифтом.

Literature

Festus states that the Lymphae are «called that after the nymphs,» then explains: Vulgo autem memoriae proditum est, quicumque speciem quandam e fonte, id est effigiem nymphae, viderint, furendi non feciesse finem; quos Graeci νυμφολήπτους vocant.

Фест указывает, что лимфы называются так по нимфам, и поясняет: Vulgo autem memoriae proditum est, quicumque speciem quandam e fonte, id est effigiem nymphae, viderint, furendi non feciesse finem; quos Graeci νυμφολήπτους vocant.

WikiMatrix

Developed by firm ElseWare (afterwards including in Hewlett-Packard ) system of a classification of fonts realized as the 10-byte table and intended for definition of «similarity» of fonts (under the specification TrueType — only for not latin character sets).

Разработанная фирмой ElseWare (впоследствии вошедшей в Hewlett-Packard ) система классификации шрифтов, реализованная в виде 10-байтовой таблицы и предназначенная для определения «похожести» шрифтов (по спецификации TrueType — только для нелатинских наборов символов).

Common crawl

Added Read/Unread column and bold type font for unread messages (only for those phone models that support message status reading).

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

Common crawl

But the cool fresh water refreshed and cleansed us as though it were a font of the gods.

Прохладная, свежая вода фонтана нас омыла и освежила, словно мы были в божественном источнике.

Literature

The first time you do this, a hidden .fonts subfolder will automatically be created in your Home folder.

После того как вы проделаете это в первый раз, скрытые подпапки .fonts будут автоматически созданы в папке Home folder.

Literature

Secondary forms are reflections which return to the font of the emanated light.

Вторичные формы – отражения, возвращающиеся к очагу истекшего света.

Literature

And I’ve already asked the french ambassador to hold him at the font during his christening.

И я уже распорядился попросить французского амбассадора держать его купель во время крещения.

OpenSubtitles2018.v3

The design of the TIR plate, provided only contained in athe cComment to the general provisions in Annex # to the TIR Convention, was actually carried outdesigned by hand and did not correspond to any standard description or font for the characters usedno detailed description is available

Рисунок с изображением таблички МДП, фигурирующий только в комментарии к общим положениям в приложении # к Конвенции МДП, фактически был выполнен от руки и не соответствовал какому-либо стандартному описанию или комплекту шрифта для используемых букв

MultiUn

Java language elements and programs will be shown in a different font, for example String.

Элементы языка Java и программ также будут выделены, например, String.

Literature

I looked over at Benji’s book where he’d doodled letters of the alphabet in different fonts.

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

Literature

Marmalade SDK is a C++ API that provides higher level functionality mostly focused on support for 2D (e.g. bitmap handling, fonts) and 3D graphics rendering (e.g. 3D mesh rendering, boned animation).

Marmalade Studio C++ API, который обеспечивает функциональность высокого уровня, в основном направлен на поддержку 2D (например, обработка растровых изображений и шрифтов) и 3D-рендеринга графики.

WikiMatrix

FreeType reported an error when setting the character size for font file %

Программа FreeType сообщила об ошибке установки размера символов для файла шрифта %

KDE40.1

That red background with the white font: it’s like meeting an old friend.

Белый фон, красная картинка: как будто старого друга встретил.

Literature

To install a font, click on the Add Fonts… button. A file open dialog will appear where you can choose your font

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

KDE40.1

Use default font

Использовать & шрифт по умолчанию

KDE40.1

Mr. Font (France), supported by Mr. Wallace (United States of America), said that in his view the inclusion or deletion of the word “final” made no difference

Г-н Фон (Франция), поддержанный г-ном Уоллесом (Соединенные Штаты Америки), говорит, что, по его мнению, включение или исключение слова «заключительные» не имеет никакого значения

MultiUn

What’s the difference between cmr5 at 10pt and the normal 10-point font, cmr10?

Каковы различия между cmr5 at 10pt и обычным шрифтом в 10 пунктов, cmr10?

Literature

Жирный цвет в css

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

Описание

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

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

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

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

font-weight | htmlbook.ru

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

Версии CSS

Описание

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

Синтаксис

Значения

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

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

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

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

Браузеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

. my-bold-font <
color: black;
font-weight: 700;
>

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

. my-bold-font <
color: black;
font-weight: bold;
>

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

strong <
font-weight: bold;
>

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

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

bolder» для шрифтов со множеством начертаний / Habr

Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700 , как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.
Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong .

Возьмём для примера Open Sans.

Open Sans имеет пять начертаний: Light 300, Normal 400, Semi-Bold 600, Bold 700 и Extra-Bold 800.

Цифры соответствуют значению font-weight .

Пусть основной текст имеет начертание Light 300, заголовки и цитаты — Normal 400, а промо-блок — Semi-Bold 600:

Тег strong может встечаться и в основном тексте, и в цитатах, и промо-блоке. Надо это учесть.

А нам хочется, чтобы у strong и b для основного текста было Normal 400, для цитат и заголовков — Bold 700, а для промо блока — Extra-Bold 800. Это сохранит контраст между жирным и нежирным текстом примерно равным во всех случаях.

Уверен, многие пробовали использовать strong , но это не принесло ожидаемого результата — текст стал ещё жирнее, чем ожидалось.

А всё потому, что согласно спецификации, значение bolder ( lighter ) увеличивает (уменьшает) унаследованное значение font-weight до следующего возможного для данного шрифта значения, согласно следующей таблице.

Определяем CSS шрифт с засечками и без засечек

Существует множество видов шрифтов, которые образуют так называемые семейства:

• Georgia, Times New Roman, serif
• Arial, Helvetica, sans-serif
• Courier New, Courier, monospace
• Verdana, Geneva, sans-serif
• Times New Roman, Times, serif

1. Шрифт в CSS | Семейства шрифтов, примеры
2. Шрифт в CSS | Изменяем вид и тип шрифта
3. Тип CSS шрифта | Наклонный, жирный шрифт
4. CSS шрифт | Определяем размер шрифта

CSS виды и семейства шрифтов:

Verdana, Geneva, sans-serif — семейство шрифтов без засечек:

Times New Roman, Times, serif — семейство шрифтов с засечками:

Courier New, Courier, monospace — семейство моноширинных шрифтов:

Еще пример форматирования:

Текст жирный, размером 18 пикселей, наклонный, семейства Times New Roman

CSS начертание шрифта свойство

примеров

Сечение три набора символов разный вес шрифта:

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

Попробуйте »

Определение атрибута и инструкции

Толщина начертание шрифта свойство текста

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

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

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

Статьи по Теме

Учебник CSS: CSS Шрифт

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

translated-content/index.html at main · mdn/translated-content · GitHub

Узнаем как изготовить в CSS жирный шрифт?

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

Присваивание

Жирный шрифт CSS присваиваете с помощью простого правила: font-weight. В качестве значения можно указать различные комбинации. Например, можно написать свойство «font-weight: bold», что означает полужирное начертание. В качестве стандартного значения используется запись «normal». Помимо ключевых слов можно использовать обычные цифры. Условные единицы колеблются от 100 до 900, где 400 соответствует команде «normal». А это означает, что если установить значение меньше 400, то шрифт будет терять свою насыщенность, а если более, то приобретет жирный вид. Это позволяет производить ручную настройку начертания.

В CSS жирный шрифт может присваиваться, исходя из родительского элемента. В каскадных таблицах существует две команды («bolder» и «lighter»), которые могут увеличивать или уменьшать насыщенность начертания. Значения будут изменяться в зависимости от родительского элемента. Свойство «font-weight» может записываться в краткой форме – «font», куда можно записать все характеристики шрифта.

Цель

Присваивать такой CSS-шрифт можно любому элементу HTML или XHTML. Эффект будет виден только в том случае, если тег содержит в себе текст. В HTML существует аналог свойству «font-weight». Если поместить текст между тегами <strong>, то он станет более насыщенным. Его свойство полностью идентично значению «bold». Некоторые разработчики не видят разницы между тегом <strong> и CSS жирный шрифт. А различия есть. Тег имеет свою собственную смысловую нагрузку, используется для действительно важной информации. А CSS-свойство – это всего лишь декоративное значение, употребляемое для украшения текста. Пускай данная разница и не ощущается при чтении, но, как советует консорциум всемирной паутины, все должно стоять на своих местах. Такой порядок в коде увеличит жизнь вашим страницам. Ведь не за горами то время, когда браузеры научатся использовать другой способ визуализации текста, где будет выделяться смысловое и декоративное значение. Не стоит об этом забывать при создании своих страниц.

Заключение

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

css выделить жирным текст — ComputerMaker.info

Автор admin На чтение 5 мин.

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

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

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

1. Жирный текст: тег

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

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

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

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

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

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

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

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

   Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.
   Internet Explorer
   Chrome
   Opera
   Safari
   Firefox
   Android
   iOS
   6.0+
   1.0+
   3.5+
   1.0+
   1.0+
   1.0+
   1.0+
   Краткая информация
   Значение по умолчанию
   normal
   Наследуется
   Да
   Применяется
   Ко всем элементам
   Ссылка на спецификацию
   http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight
   Версии CSS
   CSS 1
   CSS 2
   CSS 2.1
   CSS 3
   Описание

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

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

   HTML5 CSS2.1 IE Cr Op Sa Fx

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

   Рис. 1. Применение свойства font-weight
   Объектная модель

   [window.]document.getElementBy >elementID «).style.fontWeight
   Браузеры

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

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

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

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

   Как сделать подчеркнутый текст CSS-стилями

   Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

   style = «text-decoration:underline;» > Подчеркнутый текст CSS

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

   Так же это CSS-свойство имеет и другие интересные значения:
   blink — позволяет сделать слово или предложение мерцающим,
   line-through — перечёркивает слово или предложение,
   overline — позволяет провести линию над словом.

   Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;
   Подчеркнутый текст HTML-тегами

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

   Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

   Итак, свойство font-weight может принимать фиксированные значения:
   bold – жирный
   bolder – еще жирнее
   normal – начальный вид
   lighter – делает буквы тоньше, по сравнению с normal

   Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

2. Жирный текст: тег

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

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

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

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

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

   Значениями bolder и lighter можно задать степень жирности больше (или меньше), чем у родителя. Числовым значением (100-900) можно задать степень жирности.
   Internet Explorer
   Chrome
   Opera
   Safari
   Firefox
   Android
   iOS
   6.0+
   1.0+
   3.5+
   1.0+
   1.0+
   1.0+
   1.0+
   Краткая информация
   Значение по умолчанию
   normal
   Наследуется
   Да
   Применяется
   Ко всем элементам
   Ссылка на спецификацию
   http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight
   Версии CSS
   CSS 1
   CSS 2
   CSS 2.1
   CSS 3
   Описание

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

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

   HTML5 CSS2.1 IE Cr Op Sa Fx

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

   Рис. 1. Применение свойства font-weight
   Объектная модель

   [window.]document.getElementBy >elementID «).style.fontWeight
   Браузеры

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

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

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

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

   Как сделать подчеркнутый текст CSS-стилями

   Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

   style = «text-decoration:underline;» > Подчеркнутый текст CSS

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

   Так же это CSS-свойство имеет и другие интересные значения:
   blink — позволяет сделать слово или предложение мерцающим,
   line-through — перечёркивает слово или предложение,
   overline — позволяет провести линию над словом.

   Это свойство так же используется для стилизации отображения ссылок по умолчанию. Поэтому, если вы хотите что бы ссылки на страницах вашего сайта отображались без подчеркивания, вам нужно задать для нее text-decoration: none;
   Подчеркнутый текст HTML-тегами

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

   Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

   Итак, свойство font-weight может принимать фиксированные значения:
   bold – жирный
   bolder – еще жирнее
   normal – начальный вид
   lighter – делает буквы тоньше, по сравнению с normal

   Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

3. Жирный текст при помощи CSS
4. Краткая информация
5. Версии CSS
6. Описание
7. Синтаксис
8. Значения
9. Объектная модель
10. Браузеры
11. Навигация по статье:
12. Как сделать подчеркнутый текст CSS-стилями
13. Подчеркнутый текст HTML-тегами
14. Как сделать жирный текст CSS-стилями

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

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

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

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

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

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

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

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

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

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

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

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

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

Версии CSS

Описание

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

Синтаксис

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

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

[window.]document.getElementBy >elementID «).style.fontWeight

Браузеры

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

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

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

Навигация по статье:

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

Как сделать подчеркнутый текст CSS-стилями

Чтобы как-то выделить фрагмент, и сделать его более заметным, мы можем сделать подчеркнутый текст css-стилями, используя свойство text-decoration:underline;

style = «text-decoration:underline;» > Подчеркнутый текст CSS

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

Так же это CSS-свойство имеет и другие интересные значения:

• blink — позволяет сделать слово или предложение мерцающим,
• line-through — перечёркивает слово или предложение,
• overline — позволяет провести линию над словом.

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

Подчеркнутый текст HTML-тегами

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

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

Для выделения жирным в CSS предусмотрено свойство font-weight, которое в свою очередь имеет достаточно большое количество принимаемых значений, используя которые, вы можете подобрать для своей ситуации наиболее подходящий жирный текст css-стилями.

Итак, свойство font-weight может принимать фиксированные значения:

• bold – жирный
• bolder – еще жирнее
• normal – начальный вид
• lighter – делает буквы тоньше, по сравнению с normal

Кроме этого, можно использовать числовые значения, что бы подобрать степень жирности на свое усмотрение. Для этого можно задать число от 100 до 900, при этом 100 будет соответствовать значению lighter, а 900 будет иметь наибольшую жирность, на порядок выше, чем у значения bolder.

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

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

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

  


    
        
        
    
    
        
 Привет, я очень смелый! 
 

  

Следующий — более общий подход, он работает со всеми тегами «p» (обозначает абзац) в вашем документе и, кроме того, делает их ОГРОМНЫМИ.Кстати. Google использует этот подход в своем поиске:

  


    
        
        
        
    
    
        
 Привет, я очень смелый и ОГРОМНЫЙ! 
    

  

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

В один файл вы помещаете весь CSS (назовите его hello_world.css):

  п {
    font-weight: жирный;
    размер шрифта: 26 пикселей;
  }
  

В другой файл вы должны поместить html (назовите его hello_world.html):

  


    
        
        
        
    
    
        
 Привет, я очень смелый и ОГРОМНЫЙ! 
    

  

Надеюсь, это немного поможет.Чтобы адресовать определенные элементы в вашем документе, а не все теги, вам следует ознакомиться с атрибутами class , id и name . Повеселись!

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

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

Свойство CSS font-weight определяет толщину текстовых символов при применении к элементам HTML.

Самый тонкий шрифт начинается с font-weight: 100 , а самый толстый шрифт заканчивается на font-weight: 900 .

Числовые значения, которые можно использовать со свойством font-weight , следующие:

• 100 — Самый тонкий стиль шрифта
• 200 — Очень легкий стиль шрифта
• 300 — светлый стиль шрифта
• 400 — Обычный стиль шрифта . Это значение по умолчанию, если вы не указываете никакого
• 500 — средний стиль шрифта
• 600 — полужирный стиль шрифта
• 700 — номер для полужирный стиль
• 800 — Экстра полужирный текст
• 900 — Полужирный шрифт

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

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

  

  Здравствуйте, это абзац с жирным шрифтом

  

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

  .w-bold {
  font-weight: жирный;
}

.w-normal {
  шрифт: нормальный;
}

.w-100 {
  font-weight: 100;
}

.w-200 {
  font-weight: 200;
}

.w-300 {
  font-weight: 300;
}

.w-400 {
  font-weight: 400;
}

.w-500 {
  font-weight: 500;
}

.w-600 {
  font-weight: 600;
}

.w-700 {
  font-weight: 700;
}

.w-800 {
  font-weight: 800;
}

.w-900 {
  font-weight: 900;
}
  

Теперь вы можете добавить соответствующий класс в любое время, когда вам нужно создать текст с другим весом:

  

  Здравствуйте, это абзац с жирным шрифтом

  

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

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

Статьи по теме:

Сделать жирным шрифт в CSS: лучшие способы

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

На самом деле, разные подходы подходят для разных ситуаций, и на самом деле существует много путаницы вокруг различных HTML-тегов и свойств CSS, доступных для придания значимости вашим шрифтам.

Но не волнуйтесь — к концу этого поста вы будете знать все, что вам нужно знать! Начнем …

Семантика полужирного текста HTML

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

При выделении шрифтов жирным шрифтом доступны два специальных элемента — и . У них немного другое использование:

• используется для обозначения стиля визуального оформления .Вы используете , чтобы привлечь внимание читателей к чему-то, что не имеет большего значения для другого текста вокруг него. Например, чтобы выделить в статье названия продуктов или людей. Другой пример — те сайты, которые всегда выделяют первое предложение статьи жирным шрифтом — это еще одно использование для b .
• используется для обозначения , что означает . Вы используете , чтобы выделить часть текста, которая имеет более высокую важность или срочность, чем остальной.Это может быть предупреждение или важная часть сообщения.

Вот пример. Возьмите следующее сообщение:

«Мы обнаружили две представляющие интерес цели в ледяном мире Хот: Хана Соло, разыскиваемого за контрабанду украденных товаров и за различные другие серьезные преступления, и Люка Скайуокера, который является первоочередной целью Империи. Обе цели — считается очень опасным — подходить с особой осторожностью ».

Имена «Хан Соло» и «Люк Скайуокер» были бы хорошими кандидатами для тега b .Любой штурмовик, просматривающий это сообщение, может быстро и легко определить имена своих целей.

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

Ваша окончательная разметка может выглядеть так:

«Мы обнаружили две представляющие интерес цели в ледяном мире Хот: Хан Соло , разыскиваемый за контрабанду украденных товаров и за различные другие серьезные правонарушения, и Люк Скайуокер , который является первоочередной целью Империи. . Обе цели считаются очень опасными — подходите с особой осторожностью. «

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

Почему эти два подхода к выделению шрифтов жирным шрифтом?

Основная причина — доступность. Слабовидящие люди часто используют программы чтения с экрана для чтения содержимого в Интернете.Если вы никогда не видели, чтобы кто-то использовал один из них, обратите внимание на это:

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

Насколько я могу судить, используя свой Google Fu, программы чтения с экрана пока не делают это хорошо и постоянно. Многие из них просто читают разделы b и strong , как любой другой текст.Однако технологии становятся все лучше и лучше.

Хорошо, теперь, когда вы знаете, какие теги использовать и как лучше их использовать, давайте перейдем к CSS-части уравнения.

Создание жирных шрифтов в CSS

Используемое свойство CSS — font-weight , которое принимает следующие значения:

• полужирный
• нормальный
• полужирный
• Зажигалка
• <номер> — мы выясним, какие числа вы можете использовать ниже

Значение по умолчанию — нормальный , который является жирностью шрифта текста, который вы читаете прямо сейчас.Если вы хотите сделать свой шрифт жирным в CSS, вы просто даете font-weight значение bold :

  .keyword {
 font-weight: жирный; 
}  

Во многих случаях это все, что вам нужно. Фактически, если вы используете b или strong , вам даже не придется этого делать, потому что у них обоих по умолчанию применяется шрифт font-weight: bold !

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

Для большинства шрифтов у вас есть от 1 до 9 различных весов, с которыми можно поиграть, которые помечены с шагом 100, от 100 до 900. Они соответствуют спецификациям OpenType, разработанным Microsoft и Adobe — возможно, вы знакомы с некоторыми из этих терминов:

См. Перо
на CodePen.

Как видите, font-weight: 400; совпадает с font-weight: normal; и font-weight: 700; совпадает с font-weight: bold; .

Обратите внимание на строку @import вверху:

  @import url ('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');  

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

Резервные варианты толщины шрифта

Но вам может быть интересно, что произойдет, если вы установите font-weight на значение, которое вы не импортировали? Это сломает ваш сайт или приведет к ошибке?

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

См. Перо
на CodePen.

Браузер просто переходит к ближайшему доступному весу.

Относительный вес шрифта в CSS

Помимо установки явного веса для шрифта, вы можете установить font-weight относительно родительского элемента:

 .более жирный {
 font-weight: более жирный; 
} 
 .lighter {
 font-weight: lighter; светлее; 
}  

При применении относительного веса учитываются только 4 значения: 100 , 400 , 700 и 900 . Вот что вы получите, если примените более светлый и более жирный к разным родительским font-weights :

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

См. Перо
на CodePen.

Что лучше — явный вес шрифта или относительный вес?

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

Некоторые думают, что смелее — более безопасный вариант.Например, представьте, что у вас p font weight установлен на 400 , а ваш b установлен на font-weight: 700; . Что произойдет, если придет другой разработчик и изменит шрифт p , скажем, на 600 ? Теперь вы не увидите большой разницы между обычным и жирным шрифтом. Однако, если вы установили b на font-weight: bolder; , жирный текст автоматически увеличится до font-weight: 900; .

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

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

Изменяемый вес шрифта в CSS

Некоторые из вас могут подумать: «Эй, мне недостаточно 9 различных шрифтов. Я хочу 1000!»

Что ж, тебе повезло, друг мой! Особый вид шрифтов, известный как вариативные шрифты, на самом деле поддерживает веса от 1 до 1000. Таким образом, вы можете сделать что-то вроде этого:

  font-weight: 371;  

Так как они работают? Ну, переменные шрифты генерируются программно, аналогично изображениям SVG. Это означает, что их можно увеличивать или уменьшать по весу без потери качества — по крайней мере, когда они находятся в пределах диапазона, поддерживаемого шрифтом.

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

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

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

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

Как лучше всего выбрать толщину шрифта?

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

Например, взгляните на этот пример с Монсеррат (текст просто заполнитель от JeffSum, он ничего не значит). Здесь используются 400 и 700 , значения по умолчанию:

.

См. Перо
на CodePen.

Довольно стандартный полужирный текст. Теперь посмотрим, что произойдет, если мы изменим это значение на «100» и «800», разница будет более существенной:

См. Перо
на CodePen.

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

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

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

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

Доступность

Как добросовестный разработчик, я уверен, что вы попытаетесь использовать теги b и strong , как описано выше, для помощи людям с ослабленным зрением. Но вот еще одна вещь, которую вы можете сделать, чтобы помочь — опасайтесь очень тонких шрифтов.Для некоторых слабовидящих людей может быть трудно прочитать шрифт 100 и 200, и, вообще говоря, их лучше избегать. Если вы все же хотите их использовать, убедитесь, что у вас есть хотя бы сильный контраст между цветом шрифта и цветом фона (эта проверка контраста может вам в этом помочь).

Теперь вы являетесь мастером жирных шрифтов CSS!

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

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

fullPage — это библиотека JS, которая превращает ваш сайт в модный, полнофункциональный полностраничный сайт, который без проблем работает с библиотеками JS, такими как React, и CMS, такими как WordPress. Вы можете использовать целый ряд потрясающих эффектов (я большой поклонник эффекта воды), и их действительно легко настроить и приступить к работе. Посмотри и увидишь, что ты думаешь!

Об авторе:

Уоррен Дэвис — фронтенд-разработчик из Великобритании.
Вы можете найти больше у него на https://warrendavies.net

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

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

 шрифт - вес: weightOfFont; 

загрузить больше v

Установить различную толщину шрифта для трех абзацев:, Ссылка на HTML DOM: свойство fontWeight, Свойство font-weight устанавливает, насколько толстые или тонкие символы в тексте должны отображаться., Ссылка CSS: свойство font

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

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

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

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

 font - weight: normal | жирный | смелее | зажигалка | номер | начальная | наследовать; 

загрузить больше v

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

шрифт - вес: нормальный;
шрифт - жирность: полужирный;


шрифт - жирность: светлее;
шрифт - жирность: жирнее;


шрифт - вес: 100;
шрифт - вес: 200;
шрифт - вес: 300;
шрифт - вес: 400; // обычный
шрифт - вес: 500;
шрифт - вес: 600;
шрифт - вес: 700; // жирный
шрифт - вес: 800;
шрифт - вес: 900;


шрифт - вес: наследовать;
шрифт - вес: начальный;
шрифт - вес: вернуть;
шрифт - вес: не установлен; 

загрузить больше v

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

Если вы хотите зачеркнуть текст для другой цели, вы должны использовать свойство CSS text-decoration-line. Если вы хотите просто выделить текст полужирным шрифтом для украшения, вы должны использовать CSS font- weight вместо сильного элемента HTML.Допустим, вы хотите выделить слово в абзаце жирным шрифтом. Затем вы должны обернуть слово тегами span и использовать селектор CSS, чтобы применить свойство font-weight только к элементу span., Если вы хотите показать текст зачеркнутым по другой причине, вы должны использовать текст CSS -decoration-line и установите для этого свойства значение «line-through». Есть несколько способов выделить текст полужирным шрифтом в HTML. Вы можете использовать сильный тег, чтобы указать, что текст имеет большую важность или срочность. Браузеры прочитают этот тег и выделят текст полужирным шрифтом.Если вы хотите выделить текст полужирным шрифтом просто для украшения, вы должны использовать свойство CSS font-weight и установить для этого свойства значение «полужирный».

 
 Использование сильного элемента HTML 
 
 Это нормальный абзац. 
 
  Этот абзац важен!  
 

загрузить больше v

Чтобы сделать текст полужирным с помощью CSS, вы должны использовать свойство font-weight, а затем установить значение жирным шрифтом. Вес шрифта — это свойство CSS, которое определяет толщину текста., Вы также можете установить жирность текста, используя различные значения, такие как ключевые слова («полужирный», «полужирный») и числа («400», «700», «900»). Теперь вы знаете, как повернуть выделите текст полужирным шрифтом с помощью CSS., Получите мою бесплатную электронную книгу
чтобы подготовиться к техническому собеседованию или начать изучать Full-Stack JavaScript

 p {
   шрифт - жирность: полужирный;
} 

загрузить больше v

Другие запросы типа «undefined-undefined», связанные с «Как сделать текст жирным в CSS»

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

Использование &: hover {font-weight: bold} — это здравый смысл для разработчика FE.Но шрифт смещается вправо, когда мы используем полужирный . Иногда это может вызвать разрыв строки или проблему с макетом.

Вот два решения css-only :

1

тень текста

  тень текста: 0 0 1px черный;
тень текста: 0 0 1px черный, 0 0 1px черный; // смелее
  

Войти в полноэкранный режимВыйти из полноэкранного режима

значение
1. = координата X

Значение

2. = Координата Y

Значение

3. = радиус размытия

Значение

4. = цвет тени

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

Примечание
Safari не поддерживает десятичное число, что означает, что оно должно быть 1 пикселем.
Firefox очень чувствителен к радиусу размытия, а 1 пиксель слишком много

2

текстовый штрих

  text-stroke: 1px черный;
-webkit-text-stroke: 1px черный; // Firefox и Edge
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Примечание
IE не поддерживает text-stoke

3

Заключение

текстовый штрих

Вроде лучшее решение без IE.Вот лучшее решение, которое я могу найти для включения IE.
@media all и (-ms-high-Contrast: none), (-ms-high-Contra: active) может обнаруживать наведение IE.

  @mixin m-hover-ie {
  @media all and (-ms-high-Contrast: none), (-ms-high-Contrast: active) {
     @содержание;
  }
 a: hover {
        текстовая обводка: 1px черный;
        -webkit-text-stroke: 1px черный;
    }
     @include m-hover-ie {
       &: hover {
        тень текста: 0 0 1px черный;
       }
    }
  }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

тень текста

Если вы действительно хотите использовать тень текста в IE…
-moz-touch-enabled может обнаруживать наведение Firefox. Но это не стандартная функция, и она будет работать не для всех пользователей.
По моему личному опыту, он работает в Firefox v60 и выше.

  @mixin m-hover-firefox {
    @media (-moz-touch-enabled: 0) {
        @содержание;
    }
}
a: hover {
      тень текста: 0 0 1px;
      @include m-hover-firefox {
        тень текста: 0 0 .2 пикселей;
      }
}
  

Войти в полноэкранный режимВыйти из полноэкранного режима

Добавить собственный CSS на сайт IU Web Framework

Обзор

IU Web Framework позволяет разработчикам веб-сайтов добавлять собственные каскадные таблицы стилей (CSS) на веб-сайт, созданный с помощью системы управления веб-контентом (WCMS) IU.Как разработчик веб-сайта вы можете использовать этот настраиваемый CSS для настройки встроенных стилей IU Web Framework или для добавления новых стилей для поддержки настраиваемых разделов.

Важно:

В следующих инструкциях предполагается, что вы знакомы с написанием CSS и использованием расширенного редактора кода Cascade CMS. Чтобы узнать больше, см. Документацию Хэннона Хилла по написанию кода на Cascade CMS.

Добавьте свой собственный CSS в

site.css

Каждый сайт IU Web Framework имеет _assets / css / site.css , в котором вы можете написать любой собственный CSS, необходимый для вашего сайта.

Стили, объявленные в этом файле, имеют приоритет над встроенными стилями CSS IU Web Framework.

Примечание:

Хотя IU Web Framework позволяет добавлять пользовательские стили на ваш веб-сайт, имейте в виду, что все веб-сайты IU должны соответствовать рекомендациям по брендингу, описанным в Руководстве по веб-стилям, и требованиям доступности, описанным на accessibility.iu.edu .

Доступные шрифты

Следующие веб-шрифты под брендом IU доступны для использования на вашем сайте .css файл:

• BentonSans : нормальный, жирный
• BentonSansCond : нормальный, жирный
• BentonSansLight : обычный (без жирного шрифта)
• GeorgiaPro : нормальный (без жирного шрифта)

Пример использования

 / * Benton Sans нормальный * /
.some-class {
  семейство шрифтов: 'BentonSans', без засечек;
  Плотность шрифта: нормальная;
}

/ * Benton Sans жирный * /
.some-class {
  семейство шрифтов: 'BentonSans', без засечек;
  Плотность шрифта: жирный;
}

/ * Benton Sans Condensed нормальный * /
.some-class {
  семейство шрифтов: 'BentonSansCond', без засечек;
  Плотность шрифта: нормальная;
}

/ * Benton Sans Condensed жирный * /
.some-class {
  семейство шрифтов: 'BentonSansCond', без засечек;
  Плотность шрифта: жирный;
}

/ * Benton Sans Light нормальный * /
.some-class {
  семейство шрифтов: 'BentonSansLight', без засечек;
  Плотность шрифта: нормальная;
}

/ * Грузия Pro нормальная * /
.some-class {
  семейство шрифтов: 'GeorgiaPro', Georgia, serif;
  Плотность шрифта: нормальная;
} 

Используемые классы CSS

IU Web Framework часто использует перечисленные ниже классы CSS при стилизации встроенных элементов, таких как верхние и нижние колонтитулы, разделы и фрагменты.

Избегайте использования этих имен классов CSS в пользовательских элементах, которые вы добавляете на свой веб-сайт (например, в пользовательских разделах), если вы не собираетесь использовать для этих элементов встроенные стили IU Web Framework.

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

• . Сайт-заголовок
• . Раздел
  • .рухнул
  • . Дополнительное пространство
  • .bg-none
  • .bg-серый
  • .bg-вторичный
  • .bg-темный
  • .bg-красное дерево
  • .bg-малиновый
• . Ряд
• . Макет
• . Кнопка
• . Ремень
  • .social (значки соцсетей на поясе)
• .юбка
• .external (применяется IU Web Framework к внешним ссылкам)
• . Визуально скрыто
• .show-for-sr
• . Ориентиры

Используемые идентификаторы HTML-элементов

IU Web Framework применяет стили CSS к элементам с идентификаторами, перечисленными ниже. Будьте осторожны при переопределении или добавлении стилей CSS, применяемых к элементам с этими идентификаторами, поскольку это может оказать значительное (и непреднамеренное) влияние на внешний вид и поведение вашего веб-сайта.

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

• #home
• #header
• #skipnav
• # брендинг-бар
• #toggles
• # поиск
• # nav-main
• #content
• #footer
• #offCanvas

Могу ли я использовать font-weight: 1000?

Свойство font-weight используется для установки жирности (веса) шрифта.Степень полужирности, которую вы получаете, зависит от используемого шрифта (font-family). Можно ли превзойти стандартные значения свойства font-weight и получить font-weight: 1000?

Быстрый ответ: Зависит от вашего браузера !

Согласно спецификации Css Fonts Module Level 4, font-weight может иметь любое значение от 1 до 1000 (включительно) . Все остальные значения считаются недействительными. Эта спецификация вступила в силу с сентября 2018 года .
Если с тех пор вы обновляли свой браузер в любое время, вы можете быть уверены, что ваш браузер поддерживает CSS Fonts Level 4, тем самым поддерживая font-weight: 1000; .

До сентября 2018 г. установка font-weight: 1000; не подействовал и тихо вылетал из строя. Иногда даже после установки font-weight: 1000; желаемой смелости может не быть видно. Как тогда сделать его более смелым, учитывая, что мы не можем превышать 1000 ??? Вскоре мы узнаем, как … Перед этим давайте кратко напомним синтаксис font-weight.

Толщина шрифта Синтаксис

/ * Значения ключевых слов * /
шрифт: нормальный;
font-weight: жирный;

/ * Значения ключевого слова относительно родительского * /
font-weight: светлее;
font-weight: жирнее;

/ * Числовые значения ключевых слов * /
font-weight: 1
font-weight: 100;
font-weight: 100,6;
font-weight: 123;
font-weight: 200;
font-weight: 300;
font-weight: 321;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: 1000;

/ * Глобальные значения * /
вес шрифта: наследовать;
font-weight: начальный;
font-weight: не установлено;
 

Рабочий пример

Общие названия весов

Согласно спецификации OpenType числовые значения от 100 до 900 примерно соответствуют следующим общим названиям весов:

Более жирным, чем font-weight: 1000

Изящный трюк, позволяющий сделать ваш шрифт более жирным, чем установка font-weight: 1000; — использовать теней .Вместо того, чтобы сразу объяснять, как именно это работает, вот пример, демонстрирующий эффект.
Обратите внимание на , что в этом примере font-weight уже установлен на 1000 для достижения максимальной жирности. Нажатие на кнопку « Toggle Shadow » сделает шрифт более жирным за счет теней.

Как видно, с помощью теней вы можете сделать ваш шрифт даже более жирным, чем font-weight: 1000; жестяная банка !!!

Используемый ключевой стиль — text-shadow: 1px 0 # 000; , что придает более смелый вид.Вы можете дополнительно увеличить жирность, используя свойство text-shadow в сочетании со свойством letter-spacing . Вы можете попробовать это, обновив JS Fiddle с помощью следующего кода, чтобы увидеть результат.

/ * Использование text-shadow в сочетании с межбуквенным интервалом для придания более жирного эффекта * /
цвет: #fff
межбуквенный интервал: 2 пикселя;
тень текста: 2px 0 #fff;
 

Надеюсь, что это поможет!

Список литературы

Статьи по теме

.