网页中调用自定义字体可以通过 ‌CSS‌ 的 @font-face 规则实现

以下是详细方法：

‌1. 使用系统默认字体‌

如果只是希望指定字体，可以直接使用 font-family：

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif; /* 中英文适配 */
}
 

‌2. 使用自定义字体（推荐方法）‌

‌步骤 1：准备字体文件‌

• 格式支持：.ttf、.woff、.woff2（推荐 .woff2，体积更小）。
• 合法来源：确保字体有商用授权（免费字体如 ‌思源黑体、阿里巴巴普惠体‌）。

‌步骤 2：通过 @font-face 引入

@font-face {
  font-family: "MyFont"; /* 自定义字体名称 */
  src: url("fonts/myfont.woff2") format("woff2"), /* 优先加载 */
       url("fonts/myfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 避免文字闪烁（异步加载时显示备用字体） */
}
 

‌步骤 3：应用字体

body {
  font-family: "MyFont", sans-serif; /* 回退到默认无衬线字体 */
}
 

‌3. 使用在线字体服务‌

‌Google Fonts（需外网）

<!-- 在HTML头部引入 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- CSS中使用 -->
body {
  font-family: 'Roboto', sans-serif;
}
 

‌国内替代方案（如阿里巴巴普惠体）

@font-face {
  font-family: "AlibabaPuHuiTi";
  src: url("https://xxx/AlibabaPuHuiTi.woff2") format("woff2");
}
 

‌4. 优化加载性能‌

• ‌子集化‌：通过工具（如 Font-spider）提取页面中实际用到的字符，减少字体文件体积。
• ‌预加载‌（提升速度）：

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
 

注意事项‌

1. ‌版权问题‌：确保字体允许网页嵌入（查看字体许可证）。
2. ‌兼容性‌：
   • .woff2 支持现代浏览器，IE需 .eot 格式。
   • 提供多种格式的 src 以兼容旧浏览器。
3. ‌FOIT/FOUT‌：通过 font-display: swap 避免加载期间文字不可见。

‌示例项目结构

项目目录/
├── fonts/
│   ├── myfont.woff2
│   └── myfont.woff
└── style.css
 

在 style.css 中定义 @font-face 后即可全局使用