17370845950

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 或解析错误提示。