html - @font-face 适用于 Chrome，但不适用于 IE 或 Firefox

Question

这让我很困惑。我正在使用 font-squirrel 下载 Web 工具包以显示自定义字体。这是字体的链接:http://www.fontsquirrel.com/fontfacedemo/League-Gothic

如果您现在查看主页:http://www.simonsayswebsites.com/

中间的主要文字是“旨在为您带来更多客户的定制网站”。它在 chrome 中看起来很棒，正如它应该的那样，但如果你在 firefox 或 IE 中查看它，自定义字体就不起作用了。

这是生成字体的 CSS:

@font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;

有人有什么想法吗？我看了很多关于这方面的案例，但我没有看到一个与我的案例相关的案例，因为我认为我已经为每个浏览器包含了所有不同的必要文件，并将它们上传到他们尊重的地方。

Answer 1

四处寻找，我发现了这个有趣的 Firefox 花絮:

同源规则:默认情况下，Firefox 只接受相对链接。如果您想使用绝对链接或包含来自不同域的字体，您需要将这些字体与访问控制 header 一起发送。

尝试将这些字体 URL 更改为相对的，看看是否有帮助:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

编辑:参见 Korpela 的回答；问题是“www”子域不匹配。不过，您可能应该保持 URL 的相对性。