IE 11 上的字体支持

Question

我在 IE 11 上遇到了字体问题。我的某些元素无法接受 font-family。我有.woff 和.woff2 但它不接受我的字体。我该如何解决这个问题？ 这是我的 CSS 代码：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;

  src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot'); /* IE9 Compat Modes */
  src: local('Roboto Thin'), local('Roboto-Thin'),
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff'), /* Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
}

我正在使用font-family 规则，如下所示：

body {
  font-family: Roboto;
}

这是一个结果：

Answer 1

您的问题是您假设Roboto 是一种内置的网络字体，但事实并非如此。你需要引号：

body {
    font-family: 'Roboto';
}

Answer 2

您是否检查过 DevTools (F12) 中的网络选项卡？加载时不应出现任何 404。

如果你支持 IE10+（MS 本身不支持 IE9-），你只需要 WOFF2 和 WOFF 格式。 SVG 例如适用于 iOS3-4 或类似的东西......

您应该首先使用不常见的字体系列名称和超常规参数（无斜体、无细或粗体）进行测试：

@font-face {
  font-family: 'test';
  font-style: normal;
  font-weight: 400;

  src: url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff2') format('woff2'), /* Super Modern Browsers */
  url('../../webfonts/roboto/roboto-v18-cyrillic-ext_latin-100.woff') format('woff') /* Modern Browsers */
;
}

body,
body * {
  font-family: 'test' !important;
}

它允许您测试相对于您的 CSS 的正确路径（如果您使用 Sass 和 _partials 或 LESS 或 PostCSS 或 Stylus，则为编译的 CSS！）。
然后您可以将font-weight: 100; 添加到您的@-声明和规则中（并删除像body * 和！important :p 这样的测试位）。
然后更改字体系列的名称。