用独立 div 包裹各字体预览块，内联设置 font-family、16px 字号、1.5 行高、400 字重，禁用连字；显式声明 @font-face 加载远程字体，字体名含空格须加引号，末尾必加 sans-serif；暗色模式用 prefers-color-scheme 媒体查询控制样式，配合 css 变量与 contain 属性优化性能。
怎么用 CSS 实现多个字体并排预览
核心是让不同 font-family 在相同文本、相同样式下渲染，靠容器隔离避免继承干扰。别直接在 body 上切字体，容易被浏览器默认样式或用户代理样式污染。
实操建议：
- 每个预览块用独立
<div class="font-preview"> 包裹，内联设置 <code>font-family，不依赖 CSS 类继承 - 固定字号（如
16px）、行高（1.5）、字重（400），否则不同字体的 x-height 和字距差异会被放大成“看起来大小不一” - 文本统一用「中文：文泉驿微米黑、Noto Sans CJK、思源黑体；英文：The quick brown fox jumps over…」——覆盖常见字形与连字场景
- 加
font-feature-settings: "liga" off关闭连字，避免某些字体（如 Roboto）因开启连字导致字符粘连，干扰辨识 - 每种待预览字体，提前写好
@font-face规则，src指向可访问的字体文件，font-display: swap防止阻塞渲染 - 不要等用户点选后再发请求加载字体——
document.fonts.load()可以提前校验是否就绪，未加载完成时显示 “loading…” 占位，避免白屏或错乱 - 注意 CORS：自托管字体必须配好响应头
Access-Control-Allow-Origin: *，否则 Chrome 会静默失败，控制台只报Failed to decode downloaded font - 所有含空格、连字符、数字开头的字体名，必须用单/双引号包裹：
font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei" - 系统字体优先用英文名（
"Segoe UI"而非「微软雅黑」），中文名在部分 Linux 或无中文字库环境会 fallback 失败 - 最后一定要加通用族名：
sans-serif或serif，否则 iOS Safari 遇到未知字体名可能整个文本不可见 - 用
prefers-color-scheme媒体查询控制预览容器样式，而非 JS 操作 class：@media (prefers-color-scheme: dark) { .font-preview { background: #1e1e1e; color: #e0e0e0; } } - 避免在字体加载完成回调里改
color或background，这些属性触发布局重排；把颜色定义抽离到顶层 CSS 变量，仅通过切换:root的变量值来响应主题 - 给
.font-preview加contain: layout style paint，限制重绘范围，尤其当页面有几十个字体同时预览时，能明显减少卡顿
如何动态加载未安装的字体做预览
本地没装的字体（比如 Google Fonts 或自托管的 .woff2）必须显式 @font-face 声明，否则 font-family 指定无效，浏览器会 fallback 到默认字体，你以为在看“Inter”，实际看到的是“Times New Roman”。
实操建议：
为什么 font-family 列表里写多个字体还是只显示第一个
不是列表没生效，而是字体名含空格或特殊字符时没加引号，CSS 解析器直接截断。例如 font-family: Helvetica Neue, Arial, sans-serif 中的 Helvetica Neue 被当成两个独立字体名 Helvetica 和 Neue，后者不存在，整条声明被丢弃。
实操建议：
怎么让字体预览支持暗色模式且不闪动
字体本身不带颜色，但预览区背景、文字色、边框在主题切换时若靠 JS 强制重绘，会触发 layout → paint → composite 流程，造成肉眼可见的“先白后黑”或文字跳动。
实操建议：
document.fonts.check() 返回 true 不代表字形已绘制，load() 成功也不保证所有字重都就绪，得按需拆分 @font-face 声明，逐个监听。
