@字体面的作品在Chrome，而不是IE或Firefox(@font-face works in C

这是相当混乱给我。 我使用的字体松鼠下载一个网页工具包，以显示自定义字体。 这里是链接到字体： http://www.fontsquirrel.com/fontfacedemo/League-Gothic

如果你在网页看现在： http://www.simonsayswebsites.com/

在中间的正文说：“定制的网站，旨在帮助您获得更多的客户。” 它看起来铬很大，正是因为它应该，但如果你在任何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将只接受相对链接。 如果你想使用绝对链接或包含来自不同域的字体，你需要使用访问控制头发送这些字体。

试着改变这些字体的网址相对的，看看是否有帮助：

@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”子域名不匹配。 你或许应该保持相对的网址，虽然。

Answer 2:

的原因的问题是（是）使用跨域的字体。 启动“http://simonsayswebsites.com” A URL被视为在不同的领域比“http://www.simonsayswebsites.com”即使两个域名可能指的是同一台计算机。

切换到相对URL帮助，因为那么域是一样的。 但是，尽管传言相反，Firefox没有在拒绝绝对URL @font-face 。 我已经建立了一个简单的演示 ，以显示这一点。

据推测，传言源自情况是这样的：如果切换到相对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-face works in Chrome, but not IE or Firefox