index.html里的字体如何修改_在index.html中引入字体

作者：袖梨 2026-06-16

在index.html中用自定义字体需两步：加载字体文件（推荐<link>引入Google Fonts并加display=swap，或<style>中@font-face配本地woff2路径）+ CSS中font-family调用；缺一不可，否则回退系统字体。

怎么在 index.html 里用自定义字体（比如思源黑体、Roboto）

直接在 index.html 中改字体，核心就两步：加载字体文件 + 应用 CSS 规则。不推荐用 <font> 标签或内联 style 写死字体名，那样既没效果也不可控。

常见错误是只写 font-family: "Noto Sans SC"; 却没真正加载该字体文件，浏览器 fallback 到系统默认字体，看着像没生效。

优先用 @import 加载 Google Fonts（最简单，适合原型或轻量项目）：

<head>  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet"></head>

如果要用本地字体（如下载的 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 策略，四个点全得对上才真生效。