网站导航
设计令牌

字体

字体族、字号和字重，统一使用 font-* 形式。

本页内容

类

类声明
font-<family>font-family: var(--font-family-<family>);
font-<size>font-size: var(--font-size-<size>);
font-<weight>font-weight: var(--font-weight-<weight>);

三个命名空间共享 font- 前缀，因此名称必须在三者之间保持唯一。同名定义出现在多个命名空间时，会报告 AMBIGUOUS_TOKEN，并且不生成 CSS。

值

字体族是按顺序尝试的回退列表，字号是 rem 长度，字重则是数值请求。像素换算假设根元素字号为 16px。实际呈现的字体和可用字重取决于页面加载的字体。

字体族

类值
font-sans
var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
font-mono
var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospacevar(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
font-serif
var(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serifvar(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif
比较全部字体族
font-sans
The shape of a letter
font-mono
The shape of a letter
font-serif
The shape of a letter

字号

类值
font-3xs.5rem8px
font-2xs.625rem10px
font-xs.75rem12px
font-sm.875rem14px
font-md1rem16px
font-lg1.125rem18px
font-xl1.25rem20px
font-2xl1.5rem24px
font-3xl2rem32px
font-4xl2.25rem36px
font-5xl2.5rem40px
font-6xl3rem48px
font-7xl3.75rem60px
font-8xl4.5rem72px
font-9xl6rem96px
font-10xl8rem128px
比较全部字号
font-3xs
Aa
font-2xs
Aa
font-xs
Aa
font-sm
Aa
font-md
Aa
font-lg
Aa
font-xl
Aa
font-2xl
Aa
font-3xl
Aa
font-4xl
Aa
font-5xl
Aa
font-6xl
Aa
font-7xl
Aa
font-8xl
Aa
font-9xl
Aa
font-10xl
Aa

字重

类值
font-thin100
font-extralight200
font-light300
font-regular400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-heavy900
比较全部字重
font-thin
The shape of a letter
font-extralight
The shape of a letter
font-light
The shape of a letter
font-regular
The shape of a letter
font-medium
The shape of a letter
font-semibold
The shape of a letter
font-bold
The shape of a letter
font-extrabold
The shape of a letter
font-heavy
The shape of a letter

共享一个前缀，属性各自独立

font-serif、font-4xl 和 font-semibold 分别设置 font-family、font-size 和 font-weight。由于设置不同属性，因此可以组合使用，但其中任何一个都不是完整的文本样式。

font 前缀可改变三个独立属性

每行都从 font-sans、font-2xl 和 font-regular 开始，结果只替换指定属性对应的类。实际呈现的字体取决于可用字体。

文字说明
  1. 基准文本使用 sans 字体族、1.5rem 大小和 400 字重，根元素字号为 16px。
  2. font-serif 行只改变 font-family。font-4xl 行只将 font-size 改为 2.25rem。font-semibold 行则只将 font-weight 改为 600。
  3. 每个结果都使用相同文本，并共享无单位的 line-height 1.5 以便阅读；这些 font 类本身不会设置 line-height。
  4. 示例使用实际的预设 CSS 和可用系统字体，并不表示字体族类会下载字体文件。

字号类让行高和字距由各自的声明或继承决定。如果三个度量都应来自同一组文本样式，请使用 text-<name>。无论哪种形式，字体族和字重都仍然独立。

字体族令牌只指定字体名称，不会下载字体。预设的 sans、mono 和 serif 字体栈，分别以可选的 --font-sans、--font-mono 和 --font-serif 钩子开头。加载字体和选择全站字体栈的方法，见文字排版指南。

自定义键必须在三个命名空间之间保持不同。如果 --font-family-brand 和 --font-size-brand 同时存在，font-brand 就会有歧义。(font-size:var(--font-size-brand)) 这类显式原生声明可以直接指定要使用的属性与变量。

另见 文本样式与命名空间解析与原生字体选择.

用法

为标题设置较大的字号和中等字重，并为代码示例设置等宽字体族。

Release notes

Install the new version with npm i @master/css.

<h3 class="… font-2xl font-medium">Release notes</h3><p class="… font-sm">Install the new version with <code class="… font-mono font-xs">npm i @master/css</code>.</p>
生成的 CSS
@layer theme {  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-2xl: 1.5rem  }}@layer utilities {  .font-mono {    font-family: var(--font-family-mono)  }  .font-2xl {    font-size: var(--font-size-2xl)  }  .font-sm {    font-size: var(--font-size-sm)  }  .font-xs {    font-size: var(--font-size-xs)  }  .font-medium {    font-weight: var(--font-weight-medium)  }}

自定义

每个命名空间接受自己的令牌：--font-family-display 创建 font-display，--font-size-hero 创建 font-hero。

@theme {  --font-family-display: "Inter Display", var(--font-family-sans);  --font-size-hero: 4rem;}
生成的 CSS
@layer theme {  :root,  :host {    --font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"  }  :root,  :host {    --font-family-display: "Inter Display", var(--font-family-sans);    --font-size-hero: 4rem  }}@layer utilities {  .font-display {    font-family: var(--font-family-display)  }  .font-hero {    font-size: var(--font-size-hero)  }}

另见 主题指令与文字排版.