推荐生产环境用 标签引入 google fonts，因其更早被浏览器发现、支持预加载和缓存；display=swap 必须添加以避免 foit；本地托管需用 @font-face 正确配置路径、格式（woff2/woff）、权重与样式。
用 @import 在 CSS 中引入 Google Fonts 最简单
直接在 index.html 的 里加一个 <style></style> 块，写 @import 是最快上手的方式，适合原型或小项目。
- 必须放在所有 CSS 规则之前，否则字体可能不生效
- URL 要用 HTTPS，比如：
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); -
display=swap很关键——它让文字先用系统字体显示，等字体加载完再替换，避免「空白闪烁」或「FOIT」 - 别在
<link rel="stylesheet">和@import之间混用，顺序错乱容易触发重复请求
用 <link> 标签引入更可控，推荐生产环境用
<link> 比 @import 更早被浏览器发现和加载，还能利用预加载、缓存等机制。
- 把这行加到
index.html的顶部：<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> - 注意 URL 中的
&是 HTML 实体，不能写成&，否则解析失败 - 如果用了多个字体族，
family=后面用|分隔，比如：family=Inter|Fira+Code - 不加
display=swap会导致文字长时间不可见（尤其弱网），这是最常被忽略的坑
本地字体文件怎么配？@font-face 路径和格式要对得上
想完全脱离 CDN 或支持离线场景，就得自己托管字体文件。这时必须用 @font-face，但路径和格式稍有偏差就报 Failed to decode downloaded font 或直接不渲染。
- 字体文件建议放
./fonts/目录下，CSS 中路径写相对路径：src: url('./fonts/inter-var-latin.woff2') format('woff2'); - 至少提供
woff2（现代浏览器）和woff（兼容旧版），不要只丢一个.ttf -
font-weight和font-style必须和实际字体元数据一致，否则font-weight: 600可能 fallback 到默认粗细 - 检查浏览器控制台的 Network 面板：字体请求返回 404 或 MIME 类型错误（如服务器没配
font/woff2）都会静默失败
字体加载状态怎么观察？别只看是否“显示出来”
字体“看起来正常”不代表加载逻辑没问题。很多问题只在弱网、首次访问或低配设备上暴露。
- 打开 Chrome DevTools → Application → Frames → Fonts，能看到已加载的字体列表和来源
- 用
chrome://net-internals/#events过滤FONT事件，查下载是否卡住或被拦截 - 在 CSS 中临时加一句：
body { font-family: 'MissingFont', sans-serif; }，如果页面没报错但文字还是用了sans-serif，说明字体根本没注册成功 - 移动端 Safari 对
font-display: swap支持不稳定，有时会强制 fallback，需要额外测试
display 策略、路径解析、MIME 类型、权重匹配，每个环节断了都可能让你花半小时找不出为什么字还是宋体。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
