最稳妥的字体加载方式是用@font-face优先加载WOFF2并降级WOFF，配font-display:swap；预加载需加crossorigin；中文字体栈须前置系统字体；line-height必须用无单位值。
直接用 @font-face 加载 WOFF2 是最稳妥的方式
浏览器对 WOFF2 支持已全覆盖（Chrome 36+、Firefox 39+、Safari 10+、Edge 14+），它压缩率高、加载快，比 WOFF/TTF 更适合生产环境。别再为兼容 IE 保留 EOT 或 SVG——2026 年还在强求 IE 支持，只会拖慢所有现代用户。
常见错误是只写一个 src，结果在某些系统或网络条件下字体 fallback 失败：
- 必须提供至少两个格式：优先
woff2，降级到woff（不要用ttf，它没压缩，体积大） -
font-display: swap必须加，否则文字会白屏等待字体加载完成 -
font-family名称建议用连字符或英文，避免空格和中文（如'My-Brand-Font'，不是'我的品牌字体'）
示例：
@font-face {
font-family: 'My-Brand-Font';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
Google Fonts 不要直接 ``，改用 `` + `&display=swap`
直接 `` 看似简单，但会阻塞渲染——CSS 文件本身需额外 HTTP 请求，且字体资源在解析完 CSS 后才发起。
立即学习“前端免费学习笔记（深入）”；
更优解是预加载关键字体文件，并手动声明 @font-face：
- 先用 Google Fonts URL 解析出实际 WOFF2 地址（例如
https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2） - 在
<head>中添加：<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/..."> - 再在 CSS 中用
@font-face声明该字体，src指向同一地址 - 务必加
crossorigin属性，否则预加载失效（字体跨域资源需匿名请求）
这样能确保字体在 HTML 解析阶段就并行下载，首屏文本几乎不闪动。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
字体栈里系统字体顺序不能乱，中文必须前置「苹方 / 微软雅黑 / 系统默认」
很多人把 sans-serif 放最前，或把 Helvetica 写在中文前面，结果 macOS 用户看到的是 Helvetica（无中文字形），直接 fallback 到系统默认宋体，排版崩坏。
正确顺序要按「设备原生支持优先级」排列，尤其注意中英文混合场景：
- 中文段落：优先
"PingFang SC"（macOS）、"Hiragino Sans GB"（旧 macOS）、"Microsoft YaHei"（Windows）、"Noto Sans CJK SC"（Linux/Android）、最后sans-serif - 英文段落：可单独设
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif - 避免混用：不要在同一个
font-family值里把中英字体交叉写（如"Roboto", "Microsoft YaHei"），浏览器可能跳过整个声明
示例：
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
font-size 和 line-height 必须用相对单位，但别盲目套 rem
用 rem 确实方便全局缩放，但若根元素 font-size 被 JS 动态修改（比如适配不同屏幕），所有基于 rem 的行高都会失准——line-height: 1.5 是无单位数值，它始终相对于当前元素的 font-size，而 line-height: 1.5rem 会变成固定像素值，失去弹性。
真正安全的做法：
-
font-size可用rem或em（推荐clamp(1rem, 4vw, 1.25rem)做响应式字号） -
line-height**永远用无单位数值**（如1.6），它自动随字号缩放 -
margin和padding用em或rem配合line-height，才能保持段落呼吸感一致 - 中文段落首行缩进别用
text-indent: 2em，iOS Safari 有渲染 bug；改用padding-left: 2em+box-sizing: border-box
容易被忽略的一点：font-feature-settings 对中文排版影响极大（如开启 "liga" 连字、"calt" 上下文替代），但只有少数字体支持，加之前先确认字体文件是否内嵌 OpenType 特性。
