设计基础

排版

选择完整文本样式或单个字体 token，并一次设置网站字体。

本页内容

使用 text-<token>，以单个 class 设置完整文本样式：字号、行高与字距。字重、字体与颜色则分别用其他 class 补上。

易读的文本层级

通过字号、间距与文本角色，以常规字重建立层级。所有预览宽度都能完整显示正文。

<p class="text-xs font-regular fg-text-muted">Field notes / 024</p><h2 class="text-2xl font-regular fg-text-strong">Make room for the details.</h2><p class="text-sm">A consistent type scale helps readers move from the main idea to the supporting detail.</p>

生成的 CSS

@layer theme {  :root,  :host {    --font-weight-regular: 400;    --font-size-2xl: 1.5rem;    --text-2xl: var(--font-size-2xl);    --text-2xl--line-height: 1.35;    --text-2xl--letter-spacing: -.015em  }}@layer utilities {  .text-2xl {    font-size: var(--text-2xl);    line-height: var(--text-2xl--line-height, normal);    letter-spacing: var(--text-2xl--letter-spacing, normal)  }  .font-regular {    font-weight: var(--font-weight-regular)  }}

此层级运用字号、间距与文本角色，同时保持常规字重。只在内容需要时加入强调；标题不必默认使用更粗的字重。文本样式列出所有设置与新增方式。

#文本样式与字号

font-<size> 只改变字号，保留继承的行高与字距。text-<token> 则同时设置三者。比较两种写法在相同字号下的差异：

相同字号，两种文本设置

两个示例的字号与内容相同。font-3xl 继承父元素的行高与字距；text-3xl 则同时设置这三个属性。

<div class="leading-md tracking-normal">  <p class="font-3xl">Designing for a clearer reading experience.</p>  <p class="text-3xl">Designing for a clearer reading experience.</p></div>

生成的 CSS

@layer theme {  :root,  :host {    --font-size-3xl: 2rem;    --text-3xl: var(--font-size-3xl);    --text-3xl--line-height: 1.25;    --text-3xl--letter-spacing: -.02em  }}@layer utilities {  .text-3xl {    font-size: var(--text-3xl);    line-height: var(--text-3xl--line-height, normal);    letter-spacing: var(--text-3xl--letter-spacing, normal)  }  .font-3xl {    font-size: var(--font-size-3xl)  }}

正文、标题与大型展示文本使用 text-<token>。只有设计刻意偏离既有文本样式时，才使用 font-<size>、leading-<token> 或 tracking-<token>。

font- 前缀也接受字体与字重键名：font-sans 选择字体，font-bold 则请求指定字重。这些命名空间的自定义名称应保持区别；字体列出各自的值与解析规则。

#网站字体

在 @theme 中设置一次应用字体。预设的 base 层会将它应用到文档，因此标记无需字体 class。

globals.css

@import "@master/css";@theme {  --font-sans: "Geist", "Noto Sans TC";  --font-mono: "IBM Plex Mono";  --font-feature-sans: "ss02", "ss03", "ss04", "ss06", "ss07", "ss08";  --font-feature-mono: "cv01", "cv02", "cv29";}

base 层通过 --font-family-sans 解析 --font-sans，并应用到 body 与 Shadow Host；通过 --font-family-mono 解析 --font-mono，并应用到 code、kbd、samp 与 pre。--font-feature-* token 可以省略，默认回退到 normal；表单控件继承周围字体。使用 @font-face 或字体提供商的样式表加载字体文件。若只针对单个元素，改用 font-mono 这类 class。