Css 在支持IE的同时整合字体文件

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

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显然不支持这些字体，所以我正在考虑使用它来生成IE友好的字体文件类型。我觉得有点恶心，我不得不打7次电话找字体文件。是否有一个关于合并这些文件的好标准，这样我就只需要打一个电话？或者至少合并相似的字体系列类型？我被推荐使用base64编码所有内容，包括

css

，但我知道base64会根据我收集的信息增加文件大小，所以我不确定这样做是否值得。非常感谢您的建议。

有很多方法可以做到这一点，但下面是调用

@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;
}
...

---

字体系列-定义全局名称
字体样式-定义字体文件的字体样式
字体权重-定义字体文件的字体权重
src-定义路径
unicode范围-这是可选的：如果您不知道，请忽略这一行

因此，基本上，您必须对所有字体类型和权重重复执行此操作，除非您将所有字体类型包含在单个字体文件中。因此，通过分别定义这些字体，浏览器将很容易选择所需的字体文件。所以，您只需定义子元素的字体样式和权重，浏览器将决定选择哪个文件。因此，除了定义它们之外，没有其他选择

---

如果不想调用多个文件，

您只需像这样调用字体，字体样式和字体重量将由浏览器而不是文件呈现（注意：这可能会导致一些抗锯齿问题）

---

要获得更好的想法，请阅读：

这将帮助我支持IE。这是我用的。我最大的问题是，是否有一种方法可以合并所有的文件，这样我就没有一个单独的斜体和普通文件。如果有办法使用相同的字体，那就取决于字体文件了。如果字体文件同时包含斜体和普通两种字体，则您可以选择。但是我可以知道你想合并进口的原因吗？因为如果你想减少写入，你可以使用css预处理器，比如LESS或SCSS。另请参阅我的更新答案。是的，您可以通过以下方式转换字体文件：我已经在使用sass。我想要合并字体文件的原因是，如果我有两种字体类型，如italic和normal，那么客户端必须为每种字体对服务器进行两次调用。理想情况下，我只需要一个文件来减少这一点。我的主要目标是减少页面加载时间。这是不可能的。如果您想调用不同的文件，那么会有不同的调用。因此，您将有两个选项，一个是使用font forge之类的工具编辑字体，并将所有字体样式打包为单个字体，或者使用普通字体样式，并允许浏览器呈现字体样式（请参见上面我编辑的答案）。因此，这将是一个单一的电话。

@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");
}