@ font-face在Chrome中有效，但在IE或Firefox中不起作用

Question

这让我很困惑。 我正在使用字体松鼠来下载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仅接受相对链接。 如果要使用绝对链接或包含来自不同域的字体，则需要使用访问控制标头发送这些字体。

\n

尝试将这些字体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;
}

编辑：看到科尔佩拉的答案； 问题是来自“ www”子域的不匹配。 不过，您可能应该保持URL相对。

Answer 2

问题的原因是（曾经）跨域使用字体。 以“ http://simonsayswebsites.com”开头的URL被视为与“ http://www.simonsayswebsites.com”不同的域，即使两个域名可能引用同一台计算机。

切换到相对URL很有帮助，因为那时域是相同的。 但是，尽管有传言相反，Firefox并不拒绝@font-face绝对URL。 我已经建立了一个简单的演示来展示这一点。

据推测，谣言来自以下情况：如果切换到相对URL有帮助，自然就可以假设URL类型是问题所在。

Answer 3

我也遇到了您的问题，进行了很多搜索，但没有发现任何问题……所以我开始在CSS上进行了几分钟的实验，最后意识到我重复了字体系列名称，在两个主题中都声明了以下代码和布局页面：

<style type="text/css" media="screen, print">
    @font-face 
    {
        font-family: 'foo';
        src: url('~/Assets/fonts/foo.woff') format('woff'),
        url('~/Assets/fonts/foo.ttf') format('truetype'),
        url('~/Assets/fonts/foo.eot') format('eot');
    }
</style>

我只需要删除其中之一，我的代码就可以在所有三种浏览器中正常工作！

还有一点是，只需删除包含“ font-family：'foo';”的行。 零件就能解决问题！