This page is being translated; the original is shown (Русский ).
Толщина шрифта
Классы задают толщину начертания: weight-1 … weight-9 по шкале от 100 до
900, regular и bold — обычное и жирное, lighter и bolder — на шаг
тоньше или жирнее родителя. Берите их для заголовков, акцентов и подписей.
Пример
Шкала
Подпись над образцом — класс, который на нём стоит. Начертание видно, если
шрифт его поддерживает.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-2 sm:grid-col-3 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-1</code >
<p class ="m-0 text-4 weight-1" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-2</code >
<p class ="m-0 text-4 weight-2" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-3</code >
<p class ="m-0 text-4 weight-3" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-4</code >
<p class ="m-0 text-4 weight-4" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-5</code >
<p class ="m-0 text-4 weight-5" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-6</code >
<p class ="m-0 text-4 weight-6" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-7</code >
<p class ="m-0 text-4 weight-7" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-8</code >
<p class ="m-0 text-4 weight-8" >Начертание</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-9</code >
<p class ="m-0 text-4 weight-9" >Начертание</p >
</div >
</div >
Именованные и относительные
bolder и lighter меняют толщину относительно родителя.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >regular</code >
<p class ="m-0 text-3 regular" >Обычный текст</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >bold</code >
<p class ="m-0 text-3 bold" >Жирный текст</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >bolder</code >
<p class ="m-0 text-3 weight-3" >Текст и <span class ="bolder" >на шаг жирнее</span ></p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >lighter</code >
<p class ="m-0 text-3 weight-7" >Текст и <span class ="lighter" >на шаг тоньше</span ></p >
</div >
</div >
Ширина экрана и наведение
Меняйте ширину окна просмотра: начиная с ширины md первый образец
становится жирным. Наведите указатель на второй.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-3 p-3 bg-surface border border-outline-variant radius-surface color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >weight-3 md:weight-7</code >
<p class ="m-0 text-3 weight-3 md:weight-7" >Тонкий на узком экране, жирный от ширины md</p >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >hover:weight-7</code >
<p class ="m-0 text-3" ><a class ="hover:weight-7" href ="#" >Наведите указатель</a ></p >
</div >
</div >
Классы
Класс
CSS
Значения
regularfont-weight: normal—
boldfont-weight: bold—
lighterfont-weight: lighter—
bolderfont-weight: bolder—
weight-1font-weight: 100—
weight-2font-weight: 200—
weight-3font-weight: 300—
weight-4font-weight: 400—
weight-5font-weight: 500—
weight-6font-weight: 600—
weight-7font-weight: 700—
weight-8font-weight: 800—
weight-9font-weight: 900—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — hover:. Например: sm:regular.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Класс
Толщина
weight-3300, тонкий — крупные цифры и заголовки
weight-4, regular400, обычный текст
weight-5500, средний — подписи, кнопки
weight-6600, полужирный — подзаголовки
weight-7, bold700, жирный — заголовки, акцент
HTML wrap_text Wrap source lines content_copy Copy
<h2 class ="weight-6" >Подзаголовок</h2 >
<p >Итого: <span class ="weight-7" >12 400 ₽</span ></p >
Для одной и той же роли держите одну ступень по всему интерфейсу:
сочетание толщины и размера задаёт иерархию.
Ограничения
Браузер показывает только начертания, которые есть у шрифта. Промежуточная
ступень, которой у шрифта нет, совпадает с ближайшей.
hover: меняет толщину и вместе с ней ширину текста: соседние элементы
могут сдвинуться.
См. также
Предыдущая Начертание шрифта (капитель) Следующая Трекинг текста
