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

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

font-weight — CSS | MDN

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

font-weight: normal;
font-weight: bold;
/* Relative to the parent */
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: unset;

Значения

normal

Нормальное начертание. То же, что и 400.

bold

Полужирное начертание. То же, что и 700.

lighter

Изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание).

bolder

Изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).

100, 200, 300, 400, 500, 600, 700, 800, 900

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

Недоступность заданного значения

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

  • Если задано значение выше 500, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).
  • Если задано значение менее 400, будет использовано первое доступное более светлое начертание (если такого не окажется, то первое доступное более жирное).
  • Если задано значение 400, будет применено
    500    . Если 500 недоступно, то будет использован алгоритм для подбора значений менее 400.
  • Если задано значение 500, будет применено 400. Если 400 недоступно, то будет использован алгоритм для подбора значений менее 400.

Это означает, что для шрифтов, которые предоставляют только normal и bold начертания, 100-500 normal, и 600-900 bold.

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

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

наследуемое значениежирнеесветлее
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

Определение веса имени

Значения от 100 до 900, примерно, соответствуют следующим распространённым именам насыщенности:

ЗначениеОбщее название
100Тонкий (Волосяной) Thin (Hairline)
200Дополнительный светлый (Сверхсветлый) Extra Light (Ultra Light)
300Светлый Light
400Нормальный Normal
500Средний Medium
600Полужирный Semi Bold (Demi Bold)
700Жирный Bold
800Дополнительный жирный (Сверхжирный) Extra Bold (Ultra Bold)
900Чёрный (Густой) Black (Heavy)

Интерполяция

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

Формальный синтаксис

font-weight = 
<font-weight-absolute>  | (en-US)
bolder                  | (en-US)
lighter                 
"><font-weight-absolute> = 
normal             | (en-US)
bold               | (en-US)
<number [1,1000]>

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the
  bank, and of having nothing to do: once or twice she had peeped into the
  book her sister was reading, but it had no pictures or conversations in
  it, 'and what is the use of a book,' thought Alice 'without pictures or
  conversations?'
</p>
<div>I'm heavy<br/>
  <span>I'm lighter</span>
</div>

CSS

/* Назначение тексту элемента <p> жирного начертания.
 
  */
p {
  font-weight: bold;
}
/* Назначение тексту элемента <div> жирности, которая больше на два уровня,
чем normal, но все ещё меньше, чем стандартный bold. */
div {
 font-weight: 600;
}
/* Назначение тексту элемента <span> жирности,
которая на один уровень меньше, чем у его родителя. */
span {
  font-weight: lighter;
}

Result

Specification
CSS Fonts Module Level 4
# font-weight-prop
Начальное значениеnormal
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Обработка значенияключевое слово или числовое значение, с bolder и lighter, трансформируемися в действительное значение
Animation typeжирность шрифта

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Свойство font-weight, насыщенность шрифта — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Дневник начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <p>Блог</p> <nav> <a href=»index.

html»>На главную</a> </nav> </header> <main> <article> <h2>День второй. Хочу быть верстальщиком</h2> <p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p> <ul> <li>ты делаешь полезное дело</li> <li>можешь работать удалённо</li> <li>интересные люди</li> <li>хорошая зарплата</li> </ul> <p>Желания учиться резко прибавилось.</p> </article> <aside> Тут могла быть ваша реклама </aside> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.

png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-size: 36px; line-height: 42px; font-family: «Verdana», sans-serif; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Для класса .page-title задайте насыщенность font-weight со значением bold,
  2. а для h2 — со значением 400.

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

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

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

p.normal {
  начертание шрифта: нормальное;
}

p.thick {
 начертание шрифта: полужирный;
}

p.thicker {
  начертание: 900;
}

Попробуйте сами »

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

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

Показать демо ❯

Значение по умолчанию: обычный
Унаследовано: да
Анимация: да. Читать про анимированный Попробуй
Версия: CSS1
Синтаксис JavaScript: объект .style.fontWeight=»полужирный» Попробуй

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

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

Собственность
вес шрифта 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 Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

900 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

9002 FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

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

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

 /* Значения ключевых слов */
вес шрифта: нормальный;
вес шрифта: полужирный;
/* Значения ключевых слов относительно родителя */
вес шрифта: светлее;
вес шрифта: жирнее;
/* Числовые значения ключевых слов */
вес шрифта: 100;
вес шрифта: 200;
вес шрифта: 300;
вес шрифта: 400; /* нормальный */
вес шрифта: 500;
вес шрифта: 600;
вес шрифта: 700; /* смелый */
вес шрифта: 800;
вес шрифта: 900;
/* Глобальные значения */
вес шрифта: наследовать;
вес шрифта: начальный;
вес шрифта: вернуться;
вес шрифта: обратный слой;
вес шрифта: не установлен;

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

Значения

нормальный

Обычный вес шрифта. То же, что и 400 .

полужирный

Вес полужирного шрифта. То же, что и 700 .

зажигалка

На один относительный вес шрифта светлее родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

жирнее

На один относительный вес шрифта больше, чем у родительского элемента. Обратите внимание, что для расчета относительного веса учитываются только четыре веса шрифта; см. раздел «Значение относительных весов» ниже.

<номер>

A <число> значение от 1 до 1000 включительно. Более высокие числа представляют веса, которые выделены жирнее (или так же жирно, как) меньшие числа. Некоторые часто используемые значения соответствуют общим именам гирь, как описано в разделе «Сопоставление общих имен гирь» ниже.

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

Шрифты CSS Уровень 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 Сверхлегкий (Сверхлегкий)
300 Свет
400 Обычный (Обычный)
500 Средний
600 полужирный (полужирный)
700 Жирный
800 Extra Bold (Сверхжирный)
900 Черный (тяжелый)
950 Экстра-черный (Ультра-черный)

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

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

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

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

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

  • MDN Понимание WCAG, пояснения к Руководству 1.4
  • Понимание критерия успеха 1.4.8 | Понимание W3C WCAG 2.0
Исходное значение нормальный
Применяется ко всем элементам. Это также относится к ::first-letter и :: первая строка .
Inherited yes
Computed value the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
Animation type a font weight
 вес шрифта = 
 <абсолютный вес шрифта> | 
 смелее | 
 легче 
 "><шрифт-вес-абсолютный> = 
 обычный | 
 полужирный | 
 <число [1,1000]>

Установка веса шрифта

HTML 
 

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


<дел>
  Я тяжелый

  Я легче
CSS 
 /* Сделать текст абзаца полужирным.  */
п {
  вес шрифта: полужирный;
}
/* Устанавливаем текст div на два шага тяжелее, чем
   нормальный, но меньше стандартного жирного шрифта. */
дел {
  вес шрифта: 600;
}
/* Устанавливаем текст span на один шаг светлее
   чем его родитель. */
охватывать {
  вес шрифта: светлее;
}
Результат
60 859

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

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • семейство шрифтов
  • стиль шрифта
  • Основные стили текста и шрифта

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Comments
Leave Comment

Спецификация
Модуль шрифтов CSS Уровень 4
# font-weight-prop