1. Типография
  2. font-family

Типография

font-family

Утилиты для управления семейством шрифтов элемента.

ClassStyles
font-sans
font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */
font-serif
font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */
font-mono
font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */
font-(family-name:<custom-property>)
font-family: var(<custom-property>);
font-[<value>]
font-family: <value>;

Примеры

Базовый пример

Используйте утилиты типа font-sans и font-mono для установки семейства шрифтов элемента:

font-sans

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

font-serif

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

font-mono

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

<p class="font-sans ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-serif ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p><p class="font-mono ...">Быстрая коричневая лиса перепрыгивает через ленивую собаку ...</p>

Использование пользовательского значения

Используйте синтаксис font-[<value>] , чтобы задать font family на основе полностью пользовательского значения:

<p class="font-[Open_Sans] ...">  Lorem ipsum dolor sit amet...</p>

Для переменных CSS вы также можете использовать синтаксис: font-(family-name:<custom-property>)

<p class="font-(family-name:--my-font) ...">  Lorem ipsum dolor sit amet...</p>

Это просто сокращение, font-[family-name:var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a font-family утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<p class="font-sans md:font-serif ...">  Lorem ipsum dolor sit amet...</p>

Подробнее об использовании вариантов читайте в документации по вариантам.

Кастомизация вашей темы

Используйте переменные темы --font-* для настройки утилит font family в вашем проекте:

@theme {  --font-display: "Oswald", "sans-serif"; }

Теперь утилиту font-display можно использовать в вашей разметке:

<div class="font-display">  <!-- ... --></div>

Вы также можете предоставить значения по умолчанию для font-feature-settings и font-variation-settings для семейства шрифтов:

@theme {  --font-display: "Oswald", "sans-serif";  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";   --font-display--font-variation-settings: "opsz" 32; }

При необходимости используйте правило @font-face для загрузки пользовательских шрифтов:

@font-face {  font-family: Oswald;  font-style: normal;  font-weight: 200 700;  font-display: swap;  src: url("/fonts/Oswald.woff2") format("woff2");}

Если вы загружаете шрифт из сервиса типа Google Fonts, убедитесь, что @import находится в самом верху вашего CSS файла:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme {  --font-roboto: "Roboto", sans-serif; }

Браузеры требуют, чтобы операторы @import шли перед любыми другими правилами, поэтому URL импорты должны быть выше импортов типа @import "tailwindcss", которые встраиваются в скомпилированный CSS.

Подробнее о настройке темы читайте в документации темы.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков