在Microsoft Edge中使用@ font-face

我在这里处理一个奇怪的问题..当我使用@ 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

您只使用WOFF2不支持Microsoft Edge的格式.

WOFF2兼容性

要解决问题WOFF,请在@font-face声明中包含格式.大多数现代浏览器都支持 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');
}  

我刚刚发现,如果您在本地安装了谷歌字体(例如,如果您一直在做模型),边缘将不会显示网络字体版本.我做了很多阅读以找到问题的根源,并没有看到任何人提到这一点.

希望这有助于别人:)