在index.html中用自定义字体需两步：加载字体文件（推荐引入Google Fonts并加display=swap，或
font-display: swap，这个属性非常关键。它能避免在字体加载期间，文字区域长时间显示空白。如果不设置它，用户打开页面的第一眼，很可能会遭遇文字闪白或者布局卡顿的糟糕体验。为什么写了 font-family 还是没变样
代码写了，字体却没换上？别急，这通常是以下三个环节中的一个掉了链子：字体文件压根没加载成功，或者你的CSS选择器权重太低，被其他样式覆盖了。
- 检查网络请求
打开浏览器的开发者工具（F12），切换到Network（网络）标签页。刷新页面，看看字体文件（无论是.woff2还是引用的.css）的HTTP状态码是不是200。如果显示404，那就要警惕了：要么是文件路径写错了，要么是服务器没有正确配置字体文件的MIME类型（对于.woff2文件，应该是font/woff2）。 - 审查计算样式
在Elements（元素）面板里，选中你想检查的文字元素。然后看右侧的Computed（计算样式）标签页，找到font-family属性。这里显示的值才是最终生效的字体。你可以点击旁边的小箭头，追溯到底是哪条CSS规则决定了这个值。 - 确认选择器作用范围
确保你的CSS规则确实选中了目标元素。例如，如果你希望全局生效，最好将规则写在body标签上，像这样：body { font-family: “Noto Sans SC”, sans-serif; }。如果只写在了某个div的样式里，那么页面中的p、h1等标签很可能就被漏掉了。
woff2 和 ttf 该选哪个
给现代网站选字体格式，答案很明确：优先使用 .woff2。它的压缩效率比老旧的 .ttf 格式高出30%到50%，这意味着文件更小，加载速度更快。更重要的是，所有主流现代浏览器（Chrome 36+、Firefox 39+、Edge 14+、Safari 10+）都已全面支持它。
至于 .ttf 格式，如今它的用武之地已经非常狭窄，基本上只在需要兼容IE9这类“古董”环境时才考虑作为兜底方案。如果为了“保险”而强行在 @font-face 里添加 .ttf 文件的引用，不仅会徒增页面体积，还可能因为服务器未正确配置其MIME类型而导致加载失败，得不偿失。
- 如何获取woff2文件
你可以使用像 google-webfonts-helper 这样的在线工具来下载，或者通过命令行工具woff2_compress进行转换。 - 管理字体文件
不要将字体文件随意丢在根目录。建议统一建立一个./fonts/文件夹来存放，这样能有效避免路径混乱，也便于项目管理。 - 给文件命名提个醒
如果字体文件名包含空格或中文字符，最好将其重命名为英文或使用下划线连接。有些服务器或前端构建工具在处理带特殊字符的文件路径时可能会出错。
用 CSS 变量统一管理字体名
如果你的项目未来有更换字体的可能，或者需要处理中、英、日文等多语言混排的场景，那么把字体名硬编码在CSS各处将会是一场维护噩梦。更稳妥的做法是：使用CSS自定义属性（CSS变量）来集中管理。
这样一来，日后需要调整字体时，只需修改 :root 中的变量值即可，一改全改。这种方式也便于用Ja vaScript实现动态切换，比如为夜间模式匹配不同的字体。不过请注意：CSS变量不能用在 @font-face 规则内的 font-family 属性值上，那里仍然需要填写具体的字体家族名称字符串。
说到底，字体加载是一个完整的链路：引入 → 解析 → 下载 → 渲染。任何一个环节出问题，font-family 那行代码就只是个摆设。尤其是使用本地字体时，文件路径、MIME类型、格式声明以及 font-display 策略，这四个关键点必须全部对上，自定义字体才能真正生效。
