在 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');
}

Answer 2

程序：

为了安装所有必要的格式，我遵循的过程是从每种字体中找到我需要的字体粗细，然后从 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

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

Answer 3

Microsoft Edge 在 .woff 字体方面发生了变化。我最近购买了 Windows 10 笔记本电脑。 @font-face 中有 .woff 字体的网站没有在 Microsoft Edge 中显示它们，但在 Internet Explorer 中显示了它们。截至 2016 年 5 月 11 日的 Microsoft developer website 表示 Edge 支持 .woff2，如下所示。

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

这是我在所有网站中实施的 CSS 代码的示例，以基于上述 link 使用 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');
}

Answer 4

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

希望这对其他人有帮助 :)

在 Microsoft Edge 中使用@font-face

using @font-face in Microsoft Edge

html

css

fonts

font-face

microsoft-edge