使用@font-family 指定自定义字体：我必须全部完成吗？答案

【问题标题】：Using @font-family to specify custom font: do I have to do all of them?使用@font-family 指定自定义字体：我必须全部完成吗？
【发布时间】：2018-08-21 02:34:15
【问题描述】：

我正在尝试使用 IBM Plex otf 字体。有几种字体：Sans、Serif 等。一种字体有 16 个文件（Sans 列在here）。据我所知，IBM 没有公开托管他们的字体（所以我不能做@import 或设置链接），而是通过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');
}

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

【问题讨论】：

我认为更有效的解决方案是将它们合并到包含所有系列变体的单个字体文件中，但我不知道该怎么做。
我也是，我也不是。也许有人会。 :)

标签： css fonts webfonts

【解决方案1】：

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

【讨论】：