字体切换不生效的核心原因是未解决字体回退链和语言匹配机制。需确保font-family名称全局一致、用lang属性配合字体堆叠、验证字体文件实际包含目标文字字形，并谨慎使用font-display策略。
字体切换不生效，通常不是 @font-face 写错了，而是没解决「字体回退链」和「语言匹配机制」这两个关键问题。
确保 font-family 名称全局一致且可被识别
定义时的 font-family 名（如 "Noto Sans SC"）必须和 CSS 中实际使用的名称完全一致，包括引号、空格、大小写。浏览器不会自动纠错。
- 定义时用双引号包裹：
@font-face { font-family: "Noto Sans SC"; src: url(...); } - 使用时也用相同字符串：
body { font-family: "Noto Sans SC", sans-serif; } - 避免用中文名或含特殊符号的名称，比如
"思源黑体"在部分系统中可能被忽略
为不同语言指定专用 font-family 并配合 lang 属性
CSS 本身不“懂”语言，但可通过 [lang] 属性 + 字体堆叠，让浏览器按需选择。关键不是换整个页面字体，而是让中、日、韩、拉丁等文字各自走合适的字体路径。
- 给 html 标签设置语言：
或动态切换为lang="ja" - 用属性选择器覆盖字体：
html[lang="zh-CN"] { font-family: "Noto Sans SC", sans-serif; } - 更精细控制可结合 Unicode 范围：
@font-face { font-family: "Noto Sans JP"; unicode-range: U+3040-309F, U+30A0-30FF; }
检查字体文件是否真正支持目标文字
很多“多语言字体”其实只包含基础拉丁字符，中日韩字形是分开打包的。例如 Noto Sans 系列分 SC（简体中文）、TC（繁体）、JP（日文）、KR（韩文）等独立字体文件。
立即学习“前端免费学习笔记（深入）”；
- 别指望一个
NotoSans-Regular.woff2同时显示汉字和假名 —— 它很可能没嵌入日文平假名区间（U+3040–U+309F） - 用浏览器开发者工具 → Elements → Computed → Font → 查看“Actual font used”，确认渲染时调用的是哪个字体
- 推荐组合使用：
font-family: "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", system-ui;
避免 font-display: swap 导致的闪动与回退失效
font-display: swap 虽能提升首屏速度，但在字体加载完成前，浏览器会用后备字体渲染，若后备字体不支持对应语言，就会出现方块、问号或默认宋体乱入，造成“切换无效”的错觉。
- 开发阶段建议先用
font-display: block或auto，确认字体逻辑正确后再优化加载策略 - 如果必须用
swap，请确保 fallback 字体（如sans-serif）在目标系统中也支持所需文字 —— 比如 Windows 上sans-serif默认是微软雅黑，能显示中文；macOS 上是 Helvetica，对中文支持弱
基本上就这些。核心就两点：一是让浏览器知道“这段文字该用哪个字体”，靠 lang + font-family 配置；二是确保那个字体文件里真有你要的字形，别光看名字以为它“支持中文”。
