网页字体不会在 Firefox 和 Internet Explorer 中加载到第一页

Posted 2023-02-24

【中文标题】网页字体不会在 Firefox 和 Internet Explorer 中加载到第一页

【英文标题】：Web fonts do not load in Firefox and Internet Explorer on first page

【发布时间】：2014-04-18 08:45:34

【问题描述】：

我有一个基于 Expression Engine 的网站，虽然在 Google Chrome 和 Safari 中一切正常，但我在 Internet Explorer 和 Firefox 中遇到了网络字体问题。问题是当您第一次访问该网站时字体不会显示。如果您加载不同的页面，字体会显示，之后一切都很好。但是，如果您清除浏览器的缓存并返回该网站，则问题再次出现。

我已经尝试了从本地加载字体到确保字体样式加载到页面顶部的所有方法。

这是我的 CSS 模板的前几行，它在 html 文件的开头加载，但在“标题”模板中。有什么想法吗？提前感谢您提供的任何帮助！有问题的网站是：http://bayareafellowship.com

@font-face 
   font-family: 'montserratregular';
   src: url('fonts/montserrat-regular-webfont.eot');
   src: url('fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'),
       url('fonts/montserrat-regular-webfont.ttf') format('truetype'),
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
   font-weight: normal;
   font-style: normal;



@font-face 
   font-family: 'leaguegothic-regular-webfont';
   src: url('fonts/leaguegothic-regular-webfont.eot');
   src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/leaguegothic-regular-webfont.woff') format('woff'),
       url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
       url('fonts/leaguegothic-regular-webfont.svg#leaguegothic-regular-webfontregular') format('svg');
   font-weight: normal;
   font-style: normal;


.montserratregular 
   font-family: 'montserratregular';


.leaguegothic-regular-webfont 
   font-family: 'leaguegothic-regular-webfont';


.montserratbold 
   font-family: 'monteserratbold';

【问题讨论】：

具体是哪个版本的IE？按 F12。切换到控制台选项卡。页面是否显示错误消息？

【参考方案1】：

结果证明是服务器问题，字体文件未被识别为位于同一服务器上。这是为我解决所有问题的代码，放在 .htaccess 文件中。

  <FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
     </IfModule>
  </FilesMatch>

我仍然对 FOUT 有疑问，但那是另一回事了。谢谢大家的帮助！

【参考方案2】：

我遇到过类似的问题，IE 偶尔会忽略字体。然后的问题是我使用的字体系列名称包含太多的 IE 字符，但对所有其他浏览器都很好。

尝试缩短名称，尤其是 'leaguegothic-regular-webfont'。不确定这是否能解决您的问题，但值得一试。

【讨论】：

感谢您的回复！长字体系列名称实际上是一种匹配网络字体系列名称的尝试。原来是 'league_gothic' 并且错误仍然存​​在。