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

Posted 2023-03-15

【中文标题】在 HTML 文档中包含不同的字体

【英文标题】：Include different fonts in an HTML document

【发布时间】：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】：

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

Using .otf fonts on web browsers Using @font-face

【讨论】：

我得到了正确的答案，谢谢。这是一个路径问题，但我也学会了添加不同的类型。