在 HTML 文档中包含不同的字体答案

【问题标题】：Include different fonts in an HTML document在 HTML 文档中包含不同的字体
【发布时间】：2017-08-25 12:37:54
【问题描述】：

我必须添加一个文件夹，其中包含具有不同样式（粗体、浅色等）的字体系列，字体为 .ot、.ttf 和 .woff。字体系列和字体所在的主文件夹称为 HKExplorerSoft。

我应该如何将这些字体添加到项目中，以及以后如何在我的 CSS 中使用它们？我知道我必须创建一个@font-face 规则，例如：

@font-face {
  font-family: 'HKExplorerSoft';
  src: url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.woff'); 
}

但这不起作用，或者我不确定以后如何在 CSS 中使用它。

【问题讨论】：

【解决方案1】：

以这种方式使用

.className{
  font-family: 'HKExplorerSoft';
}

【讨论】：

添加更多文件，例如 .ttf & .otf - src: url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.ttf');

【解决方案2】：

这样做（在您的样式表中）：

@import url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.woff');

检查文件路径是否正确...

然后在您的样式中使用此名称，例如：

.myclass {
  font-family: 'HKExplorerSoft';
}

【讨论】：

【解决方案3】：

如果你想导入自定义字体，你可以看看这里提供的这个答案：

【讨论】：