@font-face是唯一真正引入本地字体的方式，因其必须显式声明字体路径、格式、字重及样式，浏览器才识别font-family名称；其他方式仅加载远程css规则，不传输字体文件本身。
直接用 @font-face 声明本地字体文件是唯一真正“引入”外部字体的方式，其他像 @import 或 <link> 都只是加载远程 CSS 规则，不等于你拿到了字体文件本身。
为什么 @font-face 是唯一可靠方式
浏览器不会凭空识别你在 font-family 里写的名称——必须先通过 @font-face 把字体文件路径、格式、字重、样式全部声明清楚，它才认得这个家族。常见错误是只改了 CSS 里的 font-family: 'Inter';，却漏掉 @font-face 块，结果页面静默回退到 sans-serif，控制台还不报错。
关键点：
-
@font-face必须出现在使用该字体的 CSS 规则之前（顺序执行） - 同一字体家族的不同字重（如 400/600/700）要各自写一个
@font-face，不能指望浏览器自动加粗 -
font-weight和font-style必须和字体文件实际元数据一致，否则font-weight: 600可能被忽略或 fallback 到 normal - 路径是相对于 CSS 文件位置的，不是 HTML 文件。比如 CSS 在
css/style.css，字体在css/fonts/inter.woff2，就得写url('fonts/inter.woff2')
src 里格式与路径怎么配才不失败
浏览器按 src 列表从左到右尝试加载，所以要把兼容性最好、体积最小的放最前。WOFF2 是首选，但必须搭配 WOFF 作为降级——只丢一个 .ttf 或只写 .woff2，旧版 Firefox 或 IE 就直接放弃加载。
常见失败现象：Failed to decode downloaded font 或控制台静默无请求，大概率是这三类问题：
- 路径写错（比如多了一个
../，或用了绝对路径但没开服务器） -
format()声明和实际文件类型不匹配（format('woff2')却给了.woff文件） - Web 服务器没配 MIME 类型：Nginx 需加
types { font/woff2 woff2; }，否则返回text/plain，浏览器拒收
font-display: swap 不是万能解
font-display: swap 确实能防 FOIT（文字长时间空白），但它会引发 FOUC（字体替换导致重排），尤其在小字号 + 多段落 + 字重变化大的正文区域，用户会明显看到文字“跳一下”。这时候得权衡：
-
block：3 秒内空白，之后用 fallback 字体显示——适合 logo、标题等非流式内容 -
optional：只在字体已缓存时用，否则直接跳过——适合非核心品牌字体，首次访问完全不阻塞 -
swap：仅当字体加载完成才替换，且替换过程不触发重排风险低时才推荐（比如大标题、单行 banner）
测试必须清缓存硬刷新：Chrome DevTools → Application → Clear storage → 勾选 “Cache storage” 和 “Service workers”，否则看不到首次加载的真实表现。
Google Fonts 用 <link> 还是 @import
生产环境一律用 <link>，别用 @import。前者更早被浏览器发现、支持预加载、可被 CDN 缓存；后者是 CSS 解析时才发起请求，天然阻塞渲染。
关键细节：
-
display=swap参数必须加在 URL 里，不能靠后续 CSS 补——https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap - URL 中的
&是 HTML 实体，写成&，否则解析失败 - 只加载需要的字重，别写
wght@100;200;300;400;500;600;700;800;900全量，CSS 文件体积和请求延迟都会涨 - 多个字体族用
|分隔：family=Inter|Fira+Code，别用逗号
字体加载不是“有就行”，而是路径、格式、MIME、字重声明、font-display、缓存策略全链路对齐。少一个环节，就可能在某个浏览器或某次弱网访问中彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
