结论是字体需通过@font-face注册、font-family调用并配合理fallback三者协同生效；仅改font-family而未声明@font-face，浏览器因无注册名而回退默认字体。
直接说结论：字体不是“引用”出来的，而是靠 font-family 声明 + @font-face 注册（如需自定义）+ 合理 fallback 三者配合生效；只改 font-family 不配 @font-face，等于没动。
为什么改了 font-family 却没变字体
常见现象是写了 font-family: "Noto Sans SC";，但页面仍显示宋体或默认无衬线体。根本原因是浏览器根本没见过这个字体名——它没被注册过。
-
font-family只是个“名字呼叫器”，不是“资源加载器” - 系统字体（如
"Microsoft YaHei"）可直接用，因为用户设备上已有 - 网络字体或自定义字体（如 Inter、思源黑体）必须先用
@font-face把文件路径和名字绑定好 - 漏写
@font-face、路径 404、CORS 被拦、格式不支持（比如只传了 .ttf 没传 .woff2），都会导致名字无效
@font-face 怎么写才不踩坑
声明一个可用的自定义字体，关键不在多，而在稳。下面这些点漏掉任一，都可能白忙活：
- 必须同时指定
font-family（自定义名）和src（文件路径），缺一不可 -
src推荐按优先级写多个格式：url('./fonts/inter.woff2') format('woff2')放最前，再补.woff保旧版兼容 -
font-weight和font-style必须跟实际字体文件一致；Inter Bold 文件就得配font-weight: 700，不能指望浏览器自动加粗 - 路径用相对路径（如
./fonts/xxx.woff2），避免file://协议下跨域失败；本地开发务必起 HTTP 服务（如 VS Code Live Server） - 服务器要返回正确 MIME 类型：
.woff2 → font/woff2，Nginx/Apache 需手动配置，否则 Chrome 会静默拒载
font-family 字体栈怎么排才可靠
字体栈不是堆得越多越好，而是要有明确层级和兜底逻辑。顺序错了，中文可能直接 fallback 到英文默认字体。
- 中文字体优先列具体名称，且必须加英文双引号：
"PingFang SC"、"Microsoft YaHei"、"Noto Sans CJK SC" - 紧跟系统通用字体链：
-apple-system、BlinkMacSystemFont、"Segoe UI"、Roboto、sans-serif - 末尾必须有通用族（
sans-serif/serif/monospace），否则无匹配时可能渲染异常甚至空白 - 避免混用中英字体名顺序，例如把
Arial放在中文名前面，会导致 Windows 下中文被强制用 Arial 渲染（显示方块） - 示例安全写法：
font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
font-display: swap 为什么不能少
不加 font-display，现代浏览器默认行为是 FOIT（Flash of Invisible Text）：字体加载完成前，文本空白几秒——用户看到的是“突然出现”的文字，体验断裂。
-
font-display: swap是目前最稳妥的选择：立即用 fallback 字体渲染，等自定义字体就绪后平滑替换 - 不要用
block（默认值），尤其对首屏关键文案；也不要盲目用optional，它可能干脆不加载字体 - 该属性只能写在
@font-face规则里，不能写在普通font-family声明中 - 搭配
<link rel="preload">提前提示浏览器加载关键字体，能进一步缩短 swap 窗口
真正难的从来不是“怎么写”，而是判断哪个环节断了：是路径 404？是 CORS？是字体文件本身没包含对应字重？还是 fallback 链漏了通用族？打开 DevTools 的 Network 和 Elements 面板，盯着字体请求状态和计算样式，比反复改 CSS 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
