在index.html中用自定义字体需两步：加载字体文件（推荐引入google fonts并加display=swap，或中@font-face配本地woff2路径）+ css中font-family调用；缺一不可，否则回退系统字体。
怎么在 index.html 里用自定义字体（比如思源黑体、Roboto）
直接在 index.html 中改字体，核心就两步：加载字体文件 + 应用 CSS 规则。不推荐用 <font></font> 标签或内联 style 写死字体名，那样既没效果也不可控。
常见错误是只写 font-family: "Noto Sans SC"; 却没真正加载该字体文件，浏览器 fallback 到系统默认字体，看着像没生效。
- 优先用
@import加载 Google Fonts（最简单，适合原型或轻量项目）：<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
- 如果要用本地字体（如下载的
SourceHanSansSC-Regular.woff2），必须配@font-face，且路径要对：<style> @font-face { font-family: "Source Han Sans SC"; src: url("./fonts/SourceHanSansSC-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } </style> -
font-display: swap很关键——避免字体加载时文字长时间空白；不用它，首屏可能闪白或卡顿
为什么写了 font-family 还是没变样
绝大多数情况是字体未成功加载，或 CSS 选择器权重不够覆盖原有样式。检查三个地方：
- 打开浏览器开发者工具（F12），看 Network 标签页里字体文件（
.woff2、.css）是否返回200；404 就说明路径错或服务器没配 MIME 类型（font/woff2） - 在 Elements 面板里选中文字元素，看 Computed 标签页下
font-family实际值是什么，点击右侧小箭头能追溯是哪条规则生效的 - 确保你的 CSS 规则作用到了目标元素上，比如
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）需要兜底，但如今基本可忽略。强行加 src: url(...ttf) 不仅增大体积，还可能因 MIME 类型配置问题导致加载失败。
- 生成
.woff2：用 google-webfonts-helper 下载，或命令行工具woff2_compress - 不要把字体文件放根目录，统一建
./fonts/文件夹，避免和index.html平级造成路径混乱 - 字体文件名含空格或中文？立刻重命名成英文下划线，否则某些服务器或构建工具会出错
用 CSS 变量统一管理字体名
如果项目后续要换字体、或支持多语言（中英日混排），硬编码字体名会很难维护。用 CSS 自定义属性提前声明更稳妥：
<style>
:root {
--font-sans: "Noto Sans SC", "Helvetica Neue", system-ui, sans-serif;
--font-serif: "Noto Serif SC", serif;
}
body {
font-family: var(--font-sans);
}
</style>
这样改字体只需动一处，也方便 JS 动态切换（比如夜间模式切字体）。注意：CSS 变量不能用在 @font-face 的 font-family 值里，那里必须写死字符串。
字体加载是个链路问题：引入 → 解析 → 下载 → 渲染。漏掉任一环，font-family 就只是个摆设。尤其本地字体，路径、MIME、格式、display 策略，四个点全得对上才真生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
