Сглаживание шрифтов

Классы задают сглаживание шрифта в браузерах macOS. Берите antialiased для светлого текста на тёмном фоне: со сглаживанием по оттенкам серого он выглядит тоньше и не расплывается.

Пример

Один и тот же светлый текст на тёмном фоне. Разницу видно в браузерах macOS; в других системах образцы одинаковы.

<div class="grid grid-col-1 sm:grid-col-2 gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">antialiased</code>
    <p class="m-0 p-3 text-3 weight-3 bg-surface-inverse color-on-surface-inverse radius-surface antialiased">Светлый текст на тёмном фоне</p>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">smoothing</code>
    <p class="m-0 p-3 text-3 weight-3 bg-surface-inverse color-on-surface-inverse radius-surface smoothing">Светлый текст на тёмном фоне</p>
  </div>
</div>

Классы

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

antialiased включает сглаживание по оттенкам серого, smoothing возвращает способ, который выбирает браузер. Класс наследуется, поэтому его ставят на контейнер — например, на тёмную панель:

<aside class="bg-surface-inverse color-on-surface-inverse antialiased">…</aside>

Ограничения

• Свойства -webkit-font-smoothing и -moz-osx-font-smoothing действуют только в macOS. В Windows, Linux, iOS и Android классы ничего не меняют.
• У семейства нет префиксов ширины экрана и состояний.

См. также

• Толщина шрифта