font-family

用于控制元素字体族的工具类。

快速参考

类	属性
font-sans	font-family: var(--font-sans); /* -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, 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

The quick brown fox jumps over the lazy dog.

font-serif

The quick brown fox jumps over the lazy dog.

font-mono

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:font-sans,font-serif,font-mono] -->
<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-serif ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

使用自定义值

使用 font-[<value>] 等工具类，可根据完全自定义的值设置字体族：

<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() 函数。

响应式设计

使用 md: 等断点变体前缀，即可让 font-family 工具类仅在中等及以上屏幕尺寸下生效：

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

在变体文档中了解更多关于使用变体的信息。

自定义主题

使用 --font-* 主题变量来自定义项目中的字体族工具类：

@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 at-rule 加载自定义字体：

@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 导入需要放在会内联到编译后 CSS 中的 @import "tailwindcss" 这类导入之上。

在主题文档中了解更多关于自定义主题的信息。