@font-face引入第三方字体生效的三大核心是路径正确、格式配齐（woff2/woff双格式）、添加font-display: swap；路径须相对CSS文件，格式缺失或未声明font-display会导致不显示或白屏。
直接用 @font-face 引入第三方字体文件，核心就三点：路径写对、格式配齐、font-display 加上。缺一不可，否则字体大概率不显示或白屏几秒。
为什么 @font-face 声明了却没生效？
最常见原因是路径错误——url() 里的路径是相对于 CSS 文件位置的，不是 HTML 页面，也不是浏览器当前 URL。比如 CSS 在 css/style.css，字体在 fonts/inter.woff2，就得写 url('../fonts/inter.woff2')，而不是 url('/fonts/inter.woff2') 或 url('fonts/inter.woff2')。
其他高频问题：
- 本地双击打开 HTML（
file://协议）时，Chrome/Firefox 默认拦截 WOFF2 加载，必须用本地服务器（如 VS Code Live Server）跑 - 字体文件 404 但没检查 Network 面板，只靠“看着没报错”判断，实际请求已失败
-
font-family名称在声明和使用时不一致（大小写、引号、空格），比如声明用'Inter'，调用写成Inter或"inter"
WOFF2 和 WOFF 怎么配才不掉链子？
现代项目必须同时提供 .woff2 和 .woff，按顺序写进 src，浏览器自动选第一个支持的格式：
@font-face {
font-family: 'Inter';
src: url('../fonts/inter.woff2') format('woff2'),
url('../fonts/inter.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
别只写一种：
- 只写
.woff2→ IE11、旧版 Safari 直接回退到备用字体 - 只写
.woff→ 加载体积多出 30–50%，移动端首屏慢 - 混写但漏掉
format('woff2')→ 虽然多数浏览器能猜，但规范写法更稳，尤其在某些构建工具里会出问题
font-display: swap 是必须加的吗？
是。不加就默认 font-display: block，Chrome 等会在字体加载完成前隐藏文字（FOIT），弱网下可能白屏 3 秒以上。
swap 的行为是：立即用备用字体渲染，等自定义字体加载完后“换过去”，用户最多看到一次文字跳动（FOUT），但不会空白。
- 别用
optional做关键字体——它可能干脆不加载，尤其在低内存设备上 - 如果品牌 logo 文字必须等字体，得配合 JS 检测
document.fonts.load()后再显示，不能只靠 CSS - 所有
@font-face块都该显式写上font-display: swap，别依赖继承或默认值
跨域字体加载被拒怎么办？
字体托管在 CDN 或不同域名时，浏览器会因 CORS 拒绝加载，控制台报 Access to font at 'https://cdn.example.com/font.woff2' from origin 'https://yoursite.com' has been blocked by CORS policy。
解决方式只有服务端配合：
- CDN 必须返回响应头：
Access-Control-Allow-Origin: *或Access-Control-Allow-Origin: https://yoursite.com - 自己搭的静态服务器（如 Nginx）需配置
add_header 'Access-Control-Allow-Origin' '*'; - 本地开发用
file://协议时，CORS 无解——必须切 HTTP 服务
最后提醒一句：字体版权比你想象中敏感。哪怕用了 @font-face，也得确认授权允许 Web 使用，商用项目别拿随便下载的 TTF 直接上生产。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
