网页中调用自定义字体可以通过 ‌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 后即可全局使用