如何将从网站下载的字体添加至网页？新手求助@font-face配置方法

安全阿岳

2026-7-18

自定义字体在网页中使用的解决方案

一、@font-face 实际操作步骤

整理字体文件
把解压后的字体文件（优先用.woff2/.woff，其次是.ttf/.otf）放到项目的静态资源目录，比如新建一个fonts文件夹，路径类似/assets/fonts/。

在CSS中声明字体
用@font-face定义字体的标识、文件路径和格式，代码示例：

@font-face {
  font-family: 'MyCustomFont'; /* 自定义字体名，后续调用必须一致 */
  src: url('/assets/fonts/MyCustomFont.woff2') format('woff2'),
       url('/assets/fonts/MyCustomFont.woff') format('woff'),
       url('/assets/fonts/MyCustomFont.ttf') format('truetype');
  font-weight: normal; /* 对应字体的字重，比如加粗版本设为bold */
  font-style: normal; /* 对应字体样式，比如斜体版本设为italic */
}

注意：路径要和你的实际文件位置完全匹配，优先用woff2格式，兼容性和加载效率最优。

在页面元素中调用字体
直接使用你定义的font-family名称，同时加上系统备用字体，防止字体加载失败：
```
body, h1, p {
  font-family: 'MyCustomFont', Arial, sans-serif;
}
```

二、任意下载字体的通用适配流程

先查版权授权：确认下载的字体允许用于网页（包括商用场景），避免侵权。
筛选可用格式：解压后只保留网页支持的字体格式（woff/woff2/ttf/otf），有些压缩包会包含仅用于本地安装的文件，无需放到项目里。
部署字体到项目：将字体文件放到服务器可访问的目录，确保路径正确（比如本地开发时用相对路径更稳妥）。

适配不同字重/样式：如果字体有粗体、斜体等变体，需要为每个变体单独声明@font-face，比如：

@font-face {
  font-family: 'MyCustomFont';
  src: url('/assets/fonts/MyCustomFont-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}