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 - 嗯，这是可选的：如果您不知道，则忽略此行

所以基本上你必须对所有字体类型重复这样做。权重，除非您将所有字体类型包含在单个字体文件中。因此，通过单独定义这些，浏览器将很容易获取所需的字体文件。所以你只需要定义字体样式＆amp;子元素的权重，浏览器将决定选择哪个文件。所以除了定义它们之外别无选择。

如果您不想调用多个文件，

你可以简单地调用这样的字体和font-style＆amp; font-weight将由浏览器而不是文件呈现（注意：这可能会导致一些消除锯齿的问题）

@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/

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

1 个答案: