css - 在支持 IE 的同时合并字体文件

Question

我现在有很多字体需要用于我的网站:

fonts/
├── Knockout-30.otf
├── Verlag-Black.otf
├── Verlag-Bold.otf
├── Verlag-Book.otf
├── Verlag-Light.otf
├── VerlagCond-Black.otf
└── VerlagCond-Bold.otf

现在我的 css 看起来像:

@font-face {
  font-family: 'Knockout';
  src: url('fonts/Knockout-30.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Book.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Light.otf') format('opentype');
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagBlack';
  src: url('fonts/Verlag-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagCond';
  src: url('fonts/VerlagCond-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagCond';
  src: url('fonts/VerlagCond-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

现在 IE 显然不支持这些字体，所以我正在考虑使用 https://onlinefontconverter.com/生成 IE 友好的字体文件类型。我不得不为字体文件调用 7 次，这对我来说似乎有点恶心。是否有关于整合这些文件的良好标准，以便我只需要调用一个电话？或者至少合并相似的字体系列类型？我被推荐使用 base64 编码所有内容并包括在 css 中，但我知道 base64 会增加我收集到的文件大小，所以我不确定这种交易是否值得。非常感谢任何建议，谢谢。

Answer 1

有很多方法可以做到这一点，但下面是调用@font-face的标准方法

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
       url(../fonts/Roboto/Roboto-ThinItalic.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto-ThinItalic.woff) format("woff"), 
       url(../fonts/Roboto/Roboto-ThinItalic.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto-ThinItalic.eot), 
       url(../fonts/Roboto/Roboto-ThinItalic.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto-ThinItalic.svg#Roboto) format("svg");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"), local("Roboto-Thin"), 
       url(../fonts/Roboto/Roboto-Thin.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto-Thin.woff) format("woff"), 
       url(../fonts/Roboto/Roboto-Thin.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto-Thin.eot),
       url(../fonts/Roboto/Roboto-Thin.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto-Thin.svg#Roboto) format("svg");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
...

---

font-family - 定义全局名称
font-style - 定义字体文件的字体样式
font-weight - 定义字体文件的字体粗细
src - 定义路径
unicode-range - 好吧，这是可选的:如果你不知道就忽略这一行

所以基本上您必须对所有字体类型和粗细重复执行此操作，除非您将所有字体类型都包含在一个字体文件中。因此，通过单独定义它们，浏览器将很容易获取所需的字体文件。因此，您只需为子元素定义字体样式和粗细，浏览器将决定选择哪个文件。因此，除了全部定义它们之外别无选择。

---

如果不想调用多个文件，

您可以像这样简单地调用字体，字体样式和字体粗细将由浏览器而不是文件呈现(注意:这可能会导致一些抗锯齿问题)

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  src: local("Roboto"),
       url(../fonts/Roboto/Roboto.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto.woff) format("woff"), 
       url(../fonts/Roboto/Roboto.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto.eot), 
       url(../fonts/Roboto/Roboto.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto.svg#Roboto) format("svg");
}

要获得更好的想法，请阅读:https://www.w3.org/TR/2009/WD-css3-fonts-20090618/