字体
用于控制元素字体族的工具类。
| 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>Use the font-[<value>] syntax to set the 字体族 based on a completely custom value:
<p class="font-[Open_Sans] ..."> Lorem ipsum dolor sit amet...</p>For CSS variables, you can also use the font-(family-name:<custom-property>) syntax:
<p class="font-(family-name:--my-font) ..."> Lorem ipsum dolor sit amet...</p>This is just a shorthand for font-[family-name:var(<custom-property>)] that adds the var() function for you automatically.
Prefix a font-family utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="font-sans md:font-serif ..."> Lorem ipsum dolor sit amet...</p>Learn more about using variants in the variants documentation.
Use the --font-* theme variables to customize the 字体族 utilities in your project:
@theme { --font-display: "Oswald", "sans-serif"; }Now the font-display utility can be used in your markup:
<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中内联。
Learn more about customizing your theme in the theme documentation.