使用@font-family 来指定自定义字体：我必须做所有这些吗？

Question

我正在尝试使用 IBM Plex otf 字体。有几种字体：Sans、Serif 等。一种字体有 16 个文件（列出了 Sans here). As far as I know, IBM isn't hosting their fonts publicly (so I can't do an @import or set up a link), instead making them available through a github download。意思是，如果你想在你的网站上使用它们，你必须从你的网站上提供它们。（对吗？）

现在，我可以为所有这些设置 80 个左右的 @font-family 引用，例如这两个用于常规和粗体 sans：

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://...IBMPlexSans-Medium.otf) format('otf');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://...IBMPlexSans-Bold.otf) format('otf');
}

但我认为可能有一种方法可以避免这种情况。所以，我的问题是：浏览器会使用任何类型的提示来查找合适的字体文件吗？例如，如果我有中等字体的源参考和系列，他们会在同一源中查找其他文件名以找到粗体、斜体或其他字体吗？还是我必须拼出所有内容？

Answer 1

我找到了解决办法。坏消息：是的，您似乎确实需要生成所有 font-face CSS，这四种不同字体的代码总计超过 3000 行。好消息：Transfonter.org 上有一个在线工具可以为您完成。它还会做一些整洁的事情，比如将 .otf 文件转换为 .woff 文件，以及许多其他转换选项。只需上传您想要的字体，点击转换，然后下载结果。结果包括一个 css 文件，其中包含所有必要的 @font-family 代码。

使用@font-family 来指定自定义字体：我必须做所有这些吗？

Using @font-family to specify custom font: do I have to do all of them?

css

fonts

webfonts