Типография
Утилиты для управления семейством шрифтов элемента.
Class | Styles |
---|---|
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
для установки семейства шрифтов элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<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.
Подробнее о настройке темы читайте в документации темы.