如何通过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 选择器权重不够覆盖原有样式。
本文共计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 选择器权重不够覆盖原有样式。