Домашняя страница Tailwind CSS
  1. Типография
  2. Сглаживание шрифтов

Краткая справка

Класс
Свойства
antialiased-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
subpixel-antialiased-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;

Основы использования

Применение сглаживания шрифтов

Используйте утилиту subpixel-antialiased для рендеринга текста с использованием субпиксельного сглаживания и утилиту antialiased для рендеринга текста с использованием сглаживания оттенков серого.

subpixel-antialiased

Быстрая коричневая лиса прыгает через ленивую собаку.

antialiased

Быстрая коричневая лиса прыгает через ленивую собаку. 

<p class="subpixel-antialiased ...">Быстрая коричневая лиса ...</p>
<p class="antialiased ...">Быстрая коричневая лиса ...</p>

Применяя условно

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:subpixel-antialiased, чтобы применять утилиту subpixel-antialiased только при hover.

<p class="antialiased hover:subpixel-antialiased">
  <!-- ... -->
</p>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:subpixel-antialiased, чтобы применить утилиту subpixel-antialiased только на экранах среднего размера и выше.

<p class="antialiased md:subpixel-antialiased">
  <!-- ... -->
</p>

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