合并字体文件以支持IE

Question

合并字体文件以支持IE

4

我现在有相当多的字体需要在我的网站上使用：

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会增加文件大小，因此我不确定这种交换是否值得。非常感谢您的任何建议。

- anthony-dandrea

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jerad Rutnam · Accepted Answer

有很多方法可以实现这个，但以下是调用@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/