你将学到什么

  • theme.typography 字体预设如何生效。
  • 如何定义 regular 与 pixel 两套字体变量。

配置示例

theme: {
  typography: {
    fontPresetDefault: "regular",
    fontPresets: {
      regular: { sans: "...", serif: "...", display: "...", tech: "...", mono: "..." },
      pixel: { sans: "...", serif: "...", display: "...", tech: "...", mono: "..." }
    }
  }
}

运行时调试

document.documentElement.dataset.fontPreset = "regular"
document.documentElement.dataset.fontPreset = "pixel"

效果验证

  • 切换后正文、标题、代码字体按预期变化。
  • 页面切换后字体状态保持一致。

常见问题与排查

  • 字体无变化：检查 data-font-preset 是否被覆盖。
  • 显示异常：检查字体栈是否包含可用回退字体。

下一篇预告

下一篇结合主题包讲“像素风”整体视觉。