HTML5通过CSS的@font-face规则引入自定义字体；需准备WOFF2、WOFF等多格式字体文件，正确声明font-family、src及font-display:swap，并注意路径、CORS与字体授权问题。
HTML5 本身不直接“添加字体”，而是通过 CSS 的 @font-face 规则引入并使用自定义字体文件，让网页在不依赖用户系统字体的前提下显示指定字体。
确认字体文件格式并准备资源
浏览器对字体格式支持不同，建议同时提供多种格式以保证兼容性：
- WOFF2：最新、压缩率高、现代浏览器普遍支持（推荐首选）
- WOFF：较老版本 WOFF，兼容性更广（覆盖 IE9+、主流现代浏览器）
- TTF / OTF：通用但体积大，部分旧 Android 或 IE 可能需要
- EOT：仅 IE6–IE9 使用，现基本可省略（除非需支持极老版本）
把字体文件（如 myfont.woff2、myfont.woff）放在项目目录中，例如 ./fonts/ 文件夹下。
用 @font-face 声明字体族
在 CSS 中（可写在 标签内或外部 CSS 文件中）定义字体：
立即学习“前端免费学习笔记（深入）”；
@font-face {
font-family: 'MyCustomFont';
src: url('./fonts/myfont.woff2') format('woff2'),
url('./fonts/myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* 推荐：避免文字闪白，优先显示系统字体再替换 */
}注意要点：
-
font-family是你自定义的字体名称，后续用 CSS 调用时就写这个名 -
src按兼容性从优到劣排序，浏览器会加载第一个它支持的格式 -
font-display: swap很关键——让文字先以备用字体显示，等自定义字体加载完再切换，提升可读性
在 HTML 元素中应用该字体
声明完后，像使用普通字体一样设置样式即可：
h1 {
font-family: 'MyCustomFont', Arial, sans-serif;
}务必保留安全的后备字体（如 sans-serif），防止字体加载失败或被拦截时页面仍可读。
检查路径与跨域问题
常见不生效原因：
-
路径错误：确保
url()中的路径相对于 CSS 文件位置正确（不是 HTML 文件） -
CORS 限制：若字体放在其他域名（如 CDN），服务器必须返回
Access-Control-Allow-Origin: *头，否则 Firefox/Chrome 会拒绝加载 - 字体未授权嵌入：部分商用字体禁止 Web 嵌入（检查 license），会导致浏览器静默忽略
可在浏览器开发者工具的「Network」标签中查看字体文件是否 200 加载成功，「Console」是否有 CORS 或解析错误提示。
