Microsoft Edge 中未显示字体答案

【问题标题】：Fonts not showing up in Microsoft EdgeMicrosoft Edge 中未显示字体
【发布时间】：2017-06-20 23:30:32
【问题描述】：

我正在创建一个 WordPress 模板，使用 @font-face 来获取字体。字体在 Chrome 和 Firefox 上显示良好。但是，当我转到 Microsoft Edge 时，字体不显示...

您可以在此处查看问题： http://www.tbsmb.school/home/ 字体为 ClaireHand，出现在顶部菜单中（“About, Admissions, Programs, Support...”）

下面是字体样式代码...

<style>
@font-face {
  font-family: 'ClaireHand';
  src: url('<?php bloginfo('siteurl'); ?>/ClaireHand.eot');
  src: url('<?php bloginfo('siteurl'); ?>/ClaireHand.eot?#iefix') format('embedded-opentype'),  
  url('<?php bloginfo('siteurl'); ?>/ClaireHand.otf')  format('opentype'),
  url('<?php bloginfo('siteurl'); ?>/ClaireHand.woff') format('woff'), 
  url('<?php bloginfo('siteurl'); ?>/ClaireHand.ttf')  format('truetype'), 
  url('<?php bloginfo('siteurl'); ?>/ClaireHand.svg#ClaireHand') format('svg');
  font-weight: normal;
  font-style: normal;
}
</style>

我知道字体路径是正确的，因为它们可以在其他浏览器中使用。

我查看了 Stackoverflow，虽然人们遇到了字体问题，但没有人回答我的问题。

请帮忙。

【问题讨论】：

您是否尝试过包含 woff2，而不是简单的 woff？支持caniuse says 常规 woff，但微软开发者网络站点leaves it kinda ambiguous，只提到了对 woff2 的支持。我注意到这是this question上最后一个答案的可能解释。（caniuse 还说支持其他类型，所以还是有点可疑，但也许值得一试。）
是的。做到了。以为woff很好……猜不是。谢谢！
哦，很划算。然后我会将其作为答案发布，因此可以关闭此问题。

标签： css fonts font-face

【解决方案1】：

浏览器必须支持你给它的字体。

如果字体不能在单个浏览器上运行，但在其他浏览器上正常，可能是因为 Edge 不支持该类型的字体。

如果浏览器无法处理您尝试提供的字体，则默认使用安全字体。

使用 CSS 你可以这样做：字体家族：coolfont，maybe-another-cool-font，safefont

它会先尝试coolfont，然后'maybe-another...'，直到最终的字体应该是所有浏览器都安全选择的字体。

【讨论】：

【解决方案2】：

正如a newer answer 中强调的一个类似的老问题，微软现在似乎只支持 Edge 中的 WOFF2 字体，而不是常规的 WOFF。

来自微软开发者网络：

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

因此，将 WOFF2 添加到您的 @font-face 规则应该可以解决问题：

url('<?php bloginfo('siteurl'); ?>/ClaireHand.woff2') format('woff2')

【讨论】：