css - IE加载字体时出现404错误

Question

我这样称呼我的字体:

@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 但它实际上是 IE 我已经测试过了。

问题是什么，如何解决或避免？

Answer 1

原因是旧版本的 IE 无法正确解释第二个 @font-face 声明中的第二个 src 属性。该解决方案称为 Fontspring @font-face syntax是在该属性的 .eot URL 末尾附加一个问号 (?)，诱使 IE 认为后面的所有内容都是查询字符串:

@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
}

您已经尝试了一些不同的“hacks”来解决您的第一个 @font-face 声明中的问题，但是，尽管您已经成功地设法阻止 IE 报告 404，但上述解决方案更简洁，不会影响 CSS 的可读性。

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