Question

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

您可以在此处查看问题： http://www.tbsmb.school/home/ 字体是ClaireHand并显示在顶部菜单中（“关于，招生，程序，支持......”）

下面是font-face样式代码......

<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，然后是'maybe-another ...'，直到最终字体应该是所有浏览器安全的字体。

Answer 2

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

来自Microsoft Developer Network：

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

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

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

字体未显示在Microsoft Edge中

2 个答案: