css - Microsoft Edge 中未显示字体

Question

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

您可以在此处查看问题: http://www.tbsmb.school/home/字体为 ClaireHand，出现在顶部菜单中(“关于、招生、计划、支持……”)

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

<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，虽然人们有字体问题，但没有人回答我的问题。

请帮忙。

Answer 1

浏览器必须支持您提供的字体。

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

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

使用 CSS，您可以这样做:font-family: coolfont, maybe-another-cool-font, safefont

它会首先尝试 coolfont，然后是“也许是另一种......”，直到最终的字体应该是为所有浏览器选择安全的字体。