我正在尝试使用IBM Plex otf字体。有几种字体:Sans、Serif等。一种字体有16个文件(此处列出了Sans)。据我所知,IBM并没有公开托管他们的字体(所以我不能执行<code>@import</code>或设置链接),而是通过github下载提供它们。意思是,如果你想在你的网站上使用它们,你必须在你的站点上提供它们。(对吗?)
现在,我可以为所有字体设置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,它相当于四种不同字体的3000多行代码。好消息是:Transfonter.org有一个在线工具可以为你做这件事。它还可以做一些简单的事情,比如将. otf文件转换为. woff文件,以及许多其他转换选项。只需上传你想要的字体,点击转换,然后下载结果。结果包括一个css文件,其中包含所有必要的@font-home
代码。