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是内置的Web字体，不是。您需要引号：

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！）。
然后，您可以在{-1声明和规则中都添加font-weight: 100;（并删除测试位，例如body *和！important：p）。
然后更改字体系列的名称。