字体“消失”实为CSS加载失败或格式兼容问题，根源在@font-face嵌入未生效：路径错误、MIME类型不符、CORS未配置、单一格式缺乏降级、file://协议限制及font-display策略导致渲染异常。
字体在 HTML5 中“消失”其实是 CSS 加载失败或格式不兼容
不是 HTML5 本身改了什么，而是现代浏览器对 @font-face 的加载策略更严格了：字体文件路径错、MIME 类型不对、跨域没配、或只塞了单一格式（比如只有 .ttf），都会导致字体“看起来缺失”。关键不在“改格式”，而在“嵌入是否真正生效”。
@font-face 必须声明完整格式 + 正确路径
只写一个 src: url('font.woff2') 很常见，但旧浏览器不认 .woff2，而新 Chrome 可能因 CORS 拒绝本地 file:// 下的字体。必须提供 fallback 格式，并确保路径可访问：
- 优先用
.woff2（体积小、支持广），降级到.woff，再降级到.ttf - 路径别用相对路径如
../fonts/xxx后忘了检查实际 HTTP 响应状态码——404 或 403 就等于没加载 - 开发时用
http-server或本地服务跑页面，别双击 HTML 文件打开（file://下多数浏览器禁用字体加载）
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
CORS 配置不当会让字体白写
字体文件和 HTML 不在同一域名下（比如字体放在 CDN 或子域名），浏览器会发预检请求；若服务器没返回 Access-Control-Allow-Origin: *，控制台就报 Font from origin 'https://cdn.example.com' has been blocked from loading 这类错误。
- 静态资源服务器（Nginx / Apache）需显式配置字体 MIME 类型和 CORS 头
- Cloudflare、OSS 等托管平台要检查“CORS 规则”是否放行
font/*类型请求 - 本地开发用 Webpack Dev Server 可加
headers: { 'Access-Control-Allow-Origin': '*' }
字体渲染异常 ≠ 字体没加载，可能是 font-display 策略太激进
加了 font-display: swap 是为防阻塞，但若字体还没加载完，浏览器会先用备用字体渲染，等字体就绪再“闪替”——用户看到跳变，误以为“字体丢了”。这不是 bug，是预期行为。
立即学习“前端免费学习笔记（深入）”；
-
font-display: block会空白等待约 3s，适合品牌字体必须显示的场景 -
font-display: optional在网络慢时直接放弃加载，适合非关键字体 - Chrome DevTools → Network → Filter “font”，看字体请求是否完成、耗时多少、是否 200
@font-face”，而在确认它被浏览器真正下载、解码、并成功映射到文本渲染管线——每一步都可能静默失败。多看 Network 面板和 Console 错误，少猜。 
