html - 在 Microsoft Edge 中使用@font-face

Question

我在这里处理一个奇怪的问题。当我使用@font-face 时，Microsoft Edge 浏览器似乎没有加载字体。我检查了所有运行 Windows 10 和 Microsoft Edge 的计算机。

我检查了http://caniuse.com/#search=font%20face

它说 font-face 与 Edge 兼容所以我不知道发生了什么。 在我的示例中，我只有一个 div 及其字体参数。

CSS

@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}

HTML

div {
  font-family:'Dosis';
}

现场版

http://codepen.io/mariomez/pen/YwGGWy

Answer 1

您仅使用 Microsoft Edge 不支持的 WOFF2 格式。

WOFF2 Compatibility

要解决此问题，请在您的 @font-face 声明中包含 WOFF 格式。大多数现代浏览器supports WOFF

为了获得最大的浏览器支持，包括所有可能的格式。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'), 
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}