IE加载字体时出现404错误

时间:2017-04-05 16:33:48

标签: css internet-explorer http-status-code-404 font-face

我正在调用我的字体:

@font-face {
  font-family: 'dinar';
  src: url('../fonts/dinarm.eot?#'),
       local('?'),
       local('Mj_Dinar Two Medium'),
       url('../fonts/dinarm.woff') format('woff'),
       url('../fonts/dinarm.ttf') format('truetype'),
       url('../fonts/dinarm.svg') format('svg');
  font-weight: normal;
  font-style: normal
}
@font-face {
  font-family: 'font-bmi';
  src: url('../fonts/font-bmi/font-bmi.eot');
  src: url('../fonts/font-bmi/font-bmi.eot') format('eot'),
       url('../fonts/font-bmi/font-bmi.woff') format('woff'),
       url('../fonts/font-bmi/font-bmi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal
}

每次有Internet Explorer的用户尝试访问该站点时,我都会在Web主机使用日志中看到很多404错误,最后我的安全插件会禁止用户。有一个使用日志的例子:

80.00.000.146 - - [05/Apr/2017:00:46:10 +0430] 
"GET /wp-content/themes/fonts/font-bmi/font-bmi.eot)%20format(%22eot%22),
%20url(../fonts/font-bmi/font-bmi.woff)%20format(%22woff%22),
%20url(../fonts/font-bmi/font-bmi.ttf)%20format(%22truetype%22 HTTP/1.1" 404 4058 
"http://www.21tech.ir/some-page/" "Mozilla/4.0 
(compatible; MSIE 8.0; Windows NT 5.1; --some other information--)"

我知道它写了Mozilla/4.0,但实际上我已经对它进行了测试。

问题是什么以及如何解决或避免?

1 个答案:

答案 0 :(得分:1)

原因是旧版本的IE无法正确解释第二个function controller(obj1, obj2, obj3){ if(!obj3.hasValue) { var self = this var args = arguments _.defer(function(){ controller.apply(self, args) }); return; } //do something } 声明中的第二个src属性。称为Fontspring @font-face syntax的解决方案是在该属性的.eot URL末尾添加一个问号(?),诱使IE认为后面的所有内容都是查询字符串:

@font-face

您已经尝试了一些不同的“黑客”来解决第一个@font-face { font-family:"font-bmi"; src:url("../fonts/font-bmi/font-bmi.eot?#iefix") format("embedded-opentype"), url("../fonts/font-bmi/font-bmi.woff2") format("woff2"), url("../fonts/font-bmi/font-bmi.woff") format("woff"), url("../fonts/font-bmi/font-bmi.ttf") format("truetype"); font-weight:normal; font-style:normal } 声明中的问题,但是,尽管您已成功设法阻止IE报告404,但上述解决方案更加清晰且无法解决问题t会影响CSS的可读性。

如需进一步阅读,请参阅Paul Irish在2009年发表的“Bulletproof @font-face syntax”文章。