如何通过index.html引入并修改网页字体样式？
- 内容介绍
- 文章标签
- 相关推荐
本文共计955个文字，预计阅读时间需要4分钟。
在HTML文件中修改字体体例，核心步骤如下：
常见错误是只写 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 策略，四个点全得对上才真生效。
本文共计955个文字，预计阅读时间需要4分钟。
在HTML文件中修改字体体例，核心步骤如下：
常见错误是只写 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 策略，四个点全得对上才真生效。