字体系列

示例

基本示例

使用诸如 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] ...">
  <!-- ... -->
</p>

For CSS variables, you can also use the font-(family-name:<custom-property>) syntax:

<p class="font-(family-name:--my-font) ...">
  <!-- ... -->
</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 ...">
  <!-- ... -->
</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.