1. 排版
  2. font-family

排版

font-family

用于控制元素字体系列的工具。

样式
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>;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 font-sansfont-mono 等工具设置元素的字体系列:

¥Use utilities like font-sans and font-mono to set the font family of an element:

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.

<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>

使用自定义值(Using a custom value)

¥Using a custom value

使用 font-[<value>] 语法 根据完全自定义的值设置 font family

<p class="font-[Open_Sans] ...">
<!-- ... -->
</p>

对于 CSS 变量,还可以使用 font-(family-name:<custom-property>) 语法:

<p class="font-(family-name:--my-font) ...">
<!-- ... -->
</p>

这只是简写,用于 font-[family-name:var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

font-family 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

<p class="font-sans md:font-serif ...">
<!-- ... -->
</p>

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --font-* 主题变量来自定义项目中的 font family 工具:

@theme {
--font-display: "Oswald", "sans-serif";
}

现在 font-display 工具可用于你的标记:

<div class="font-display">
<!-- ... -->
</div>

你还可以为字体系列提供默认的 font-feature-settingsfont-variation-settings 值:

¥You can also provide default font-feature-settings and font-variation-settings values for a font family:

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

¥If needed, use the @font-face at-rule to load custom fonts:

@font-face {
font-family: Oswald;
font-style: normal;
font-weight: 200 700;
font-display: swap;
src: url("/fonts/Oswald.woff2") format("woff2");
}

如果你从 Google 字体 等服务加载字体,请确保将 @import 放在 CSS 文件的最顶部:

¥If you're loading a font from a service like Google Fonts, make sure to put the @import at the very top of your CSS file:

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import "tailwindcss";
@theme {
--font-roboto: "Roboto", sans-serif;
}

浏览器要求 @import 语句位于任何其他规则之前,因此 URL 导入需要位于编译的 CSS 中内联的 @import "tailwindcss" 等导入之上。

¥Browsers require that @import statements come before any other rules, so URL imports need to be above imports like @import "tailwindcss" which are inlined in the compiled CSS.

在此详细了解如何自定义主题: 主题文档

TailwindCSS v4.0 中文网 - 粤ICP备13048890号