多个@font-face声明必须各自独立命名，每套字体需唯一font-family值，否则后声明会覆盖前声明；fonts.css须完整包含所有@font-face规则且路径正确；中英文混排应分层或按unicode-range切分；性能敏感时宜拆分css、精简字重、强制woff2，中文字体需子集化。
多个@font-face声明必须各自独立命名，不能共用font-family名
同一页面引入多套字体（比如 Inter + Source Code Pro + Noto Sans CJK），每套都需单独写一个 @font-face 块，且每个块的 font-family 值必须唯一。浏览器靠这个名字匹配后续 CSS 中的 font-family 调用，重名会导致后声明的覆盖前声明，甚至部分字体失效。
常见错误是复制粘贴时漏改名字：
- 错：
font-family: 'Inter';写了两遍，第二套没改成'Source Code Pro' - 对：第一套用
font-family: 'Inter'，第二套用font-family: 'Source Code Pro'，第三套用font-family: 'Noto Sans SC'
中文字体尤其注意命名一致性——Noto Sans SC 和 Noto Sans CJK SC 是不同字体，不能混用。
link 引入 CSS 文件时，确保它内部包含全部需要的 @font-face 声明
很多人以为只要 <link rel="stylesheet" href="fonts.css"> 就完事了，其实关键在 fonts.css 本身是否完整。这个文件必须显式写出所有字体的 @font-face 规则，不能只写 font-family 调用而漏掉声明。
检查方法很简单：打开 fonts.css 文件，搜索 @font-face，确认每个要用的字体家族都有对应块；再看每个块里的 src 是否指向可访问的路径（如 url('./fonts/inter-v4-regular.woff2')）。
容易踩的坑：
- 路径写成
url('fonts/inter.woff2')（缺./），在某些服务器或本地双击打开时解析为file:///fonts/...导致 404 - CSS 文件里用了相对路径，但
<link>的href是绝对路径（如/css/fonts.css），导致字体路径拼接错位 - CDN 托管的 CSS 文件中
src是相对路径，但 CDN 没同步上传字体文件，结果 Network 面板里.woff2显示 404
中英文混排场景下，font-family 列表要按语言优先级分层写
直接写 font-family: 'Inter', 'Noto Sans SC', sans-serif; 是错的——浏览器会从左到右逐个尝试，一旦某个字体支持当前字符（比如中文），就不再往后查。结果可能是英文用 Inter，中文却用 Noto，但标点、数字、拉丁字母仍被 Noto 渲染，破坏设计统一性。
正确做法是按语言做 fallback 分层：
- 英文/代码段：
font-family: 'Inter', 'Source Code Pro', monospace; - 中文正文：
font-family: 'Noto Sans SC', 'Inter', sans-serif;（把中文字体放最前，确保中文字符优先命中） - 或更稳妥地用 Unicode 范围切分：
@font-face { font-family: 'Inter-Latin'; unicode-range: U+000-UFFF; }+@font-face { font-family: 'Noto-CJK'; unicode-range: U+4E00-9FFF, U+3400-4DBF; }，再在font-family中组合调用
注意：unicode-range 在 Safari 旧版和部分安卓 WebView 中支持不全，上线前务必实测。
加载性能敏感时，避免用 link 一次性拉取整套字体文件
用 <link rel="stylesheet"> 加载含多个 @font-face 的 CSS，浏览器会并发请求所有字体文件（即使页面只用其中一两个）。对移动端或弱网用户，这可能拖慢首屏渲染。
替代方案有限但有效：
- 拆分 CSS：把最常用字体（如正文用的
Noto Sans SC）单独提成main-fonts.css，先<link>；次要字体（如标题用的Playfair Display）延迟用loadCSS()动态注入 - 精简字重：只声明实际用到的
font-weight（如只用 400 和 700），别写font-weight: 100 200 300 ... 900 - 强制 woff2：现代项目可放弃 ttf/otf，只提供
format('woff2')，体积通常比 woff 小 30% 以上
真正难处理的是中文字体——Noto Sans CJK SC 单个 woff2 就 3~5 MB，这时候 link 引入已不是最优解，该考虑子集化或服务端按需生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
