font-family

示例

基本示例

使用 font-sans 和 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-namevar(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

前缀一个 font-family 实用工具 带有断点变体，例如 md:，仅在以下情况下应用该实用工具中等 屏幕尺寸及以上

<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 规则加载自定义字体

@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 中。

在

主题文档