如何在HTML/CSS中引入并使用已下载安装的本地字体？

1. 整理字体文件到项目 #

把你下载的Sansation字体源文件（通常为.ttf/.otf格式，优先使用兼容性更好、体积更小的.woff/.woff2格式）存入网站项目的专属目录，例如新建fonts文件夹统一存放所有字体资源。

2. CSS中声明自定义字体 #

在你的CSS文件顶部添加@font-face规则完成字体注册，不同字重/字样式的字体需要单独声明：

/* 常规字重 */
@font-face {
  font-family: 'Sansation'; /* 自定义字体名称，后续调用需与此完全一致 */
  src: url('./fonts/Sansation-Regular.woff2') format('woff2'),
       url('./fonts/Sansation-Regular.woff') format('woff'),
       url('./fonts/Sansation-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
/* 粗体（如果有对应字体文件可以加） */
@font-face {
  font-family: 'Sansation';
  src: url('./fonts/Sansation-Bold.woff2') format('woff2'),
       url('./fonts/Sansation-Bold.woff') format('woff'),
       url('./fonts/Sansation-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
/* 斜体同理，调整font-style为italic、替换对应字体文件路径即可 */

3. 应用字体到页面元素 #

声明完成后就可以在CSS中调用该字体，示例如下：

/* 全局应用字体，后面加系统无衬线字体作为兜底，避免字体加载失败时显示异常 */
body {
  font-family: 'Sansation', sans-serif;
}
/* 仅给指定元素应用，例如仅标题用该字体 */
h1, h2, h3 {
  font-family: 'Sansation', sans-serif;
  font-weight: 700; /* 对应之前声明的粗体字重 */
}

注意事项 #

• src中的url路径为字体文件相对于当前CSS文件的相对路径，路径填写错误会导致字体加载失败
• 不要依赖本地安装的字体实现网页效果，仅你本地安装字体的话其他访问者设备没有安装对应字体会显示 fallback 字体，必须将字体文件放入项目一同部署
• 如果部署后出现跨域无法加载字体的问题，调整服务器配置允许字体类资源的跨域访问即可
• 商用前确认Sansation字体的授权范围符合你的使用场景

内容的提问来源于stack exchange，提问作者Furkan Yilmaz