排版
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-sans
和 font-mono
等工具设置元素的字体系列:
¥Use utilities like font-sans
and font-mono
to set the font family of an element:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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-settings
和 font-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.
在此详细了解如何自定义主题: 主题文档。