Question

我在这里处理一个奇怪的问题..当我使用@ font-face时，似乎Microsoft Edge浏览器不会加载字体。我检查了所有运行Windows 10＆amp; 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

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

Answer 2

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

希望这有助于其他人:)

Answer 3

<强>步骤：

我为了安装所有必要的格式而遵循的程序是从每种字体中找到我需要的字体权重，然后从Google字体下载它。然后使用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

Answer 4

Microsoft Edge关于.woff字体的情况发生了变化。我最近购买了一台Windows 10笔记本电脑。 @ font-face中包含.woff字体的网站未在Microsoft Edge中显示它们，但确实在Internet Explorer中显示它们。截至2016年11月5日的Microsoft developer website表示Edge中支持.woff2，如下所示。

Microsoft Edge支持Web开放字体格式（WOFF）文件格式2.0规范，该规范提供了WOFF 1.0的改进压缩算法。支持字体格式“woff2”。

以下是我在所有网站中实施的CSS代码示例，以便根据上述链接使用Microsoft Edge成功显示我的特殊字体。

@font-face {
  font-family: Eurostile;
  src: url("http://mylink/eurostile.woff"), url("http://mylink/eurostile.woff2"), url("http://mylink/eurostile.eot"), url("http://mylink/eurostile.ttf") format('truetype');
}

在Microsoft Edge中使用@ font-face

4 个答案: