在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

您只使用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');
}  

Answer 2

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

希望这有助于别人:)

Answer 3

程序：

为了安装所有必要的格式，我遵循的过程是从每种字体中找到我需要的字体粗细，然后从 Google Fonts 下载它。然后使用https://everythingfonts.com/font-face（字体生成器）下载所有格式以及 CSS 代码。然后我将它们全部合并到我的 CSS 和 HTML 中。

CSS：

@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}

HTML（摘录）：

.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}

文件：（我的域文件夹）/字体

fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf