Html IE11上的字体支持

我在IE 11上的字体有问题。我的某些元素无法接受

字体系列

。我有

.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 */
}

我正在使用

字体系列

规则，如下所示：

body {
  font-family: Roboto;
}

结果如下：

---

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

body {
    font-family: 'Roboto';
}

---

是否检查了DevTools（F12）中的“网络”选项卡？你不应该有任何404在负载

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

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

它允许您测试相对于CSS的正确路径（如果您使用Sass和_partials或LESS或postsss或Stylus，则编译CSS！）。
然后可以添加

font-weight:100到您的@声明和规则（并删除测试位，如body*和！重要提示：p）。

然后更改字体族的名称

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