font-display 必须显式设为 swap 以避免首屏白屏，它用系统字体先渲染再替换；preload 字体需加 crossorigin、as="font" 和 type；只用 woff2 格式；启用 font-optical-sizing: auto 提升可读性。
font-display 必须显式设置，否则浏览器默认用 block，首屏文字大概率白屏 1–3 秒——这不是加载慢，是策略错误。
为什么 font-display: swap 是最稳妥的起点
它让浏览器立刻用系统字体渲染文本，等自定义字体一就绪就替换，彻底避开 FOIT（文字消失）。但要注意两点：
• 替换时可能引发轻微重排，尤其当自定义字体字宽明显不同时
• 如果字体文件本身加载失败，用户永远看不到它，但内容始终可见
• 不适合品牌 Logo 字或极短标语——这类场景可改用 fallback，给 100ms 窗口尝试加载，超时即放弃
示例写法：
@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap;
}
crossorigin 才生效
只写 是无效的。现代浏览器强制要求字体 preload 必须带 crossorigin 属性，哪怕字体同源。
必须同时满足三项：
as="font"type="font/woff2"-
crossorigin（值为空即可，不用填"anonymous"）
正确写法：
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin>
验证方式：打开 Chrome DevTools → Network 面板，找到该字体请求，Priority 显示为 high 才算成功。
只上线 .woff2，删掉所有其他格式
WOFF2 在 Chrome 36+、Firefox 39+、Safari 10+、Edge 14+ 全面支持，体积比 TTF 小 30%~80%，中文字体子集化后优势更明显。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
继续保留 .woff、.ttf、.eot 只会带来三个实际问题：
- CDN 缓存压力翻倍
- 构建流程多出转码步骤，易出错
- HTTP 请求头容易漏配
Content-Type: font/woff2，导致 Safari 拒收
服务器响应头务必检查：curl -I https://yoursite.com/fonts/Inter.woff2，确认返回 Content-Type: font/woff2。
font-optical-sizing: auto 容易被忽略，但对可读性影响真实存在
这个属性启用 OpenType 字体的光学尺寸变体，比如同一款字体在 12px 和 36px 下，会自动选用不同轮廓设计的字形——小字号更开张、大字号更紧凑，视觉上更协调。
它不增加请求、不依赖 JS，只需一行 CSS：
body {
font-optical-sizing: auto;
}
但注意：仅对支持该特性的字体有效（如 Inter、IBM Plex、一些 Adobe 字体），且 Safari 15.4+、Chrome 87+、Firefox 79+ 才支持。老版本浏览器会安静忽略，无副作用。
真正容易踩的坑是：以为设了 font-display 就万事大吉，却没检查字体文件是否真被用了——打开 DevTools → Application → Fonts 面板，看实际渲染用的是哪一款字体，别被 fallback 栈骗了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
