Question

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

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

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

这是生成font-face的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只接受相对链接。如果要使用绝对链接或包含来自不同域的字体，则需要使用访问控制标题发送这些字体。~~

~~尝试将这些字体网址更改为亲戚，看看是否有帮助：~~

@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相对。

Answer 2

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

切换到相对URL有帮助，因为那时域是相同的。但尽管有相反的传言，Firefox并没有拒绝@font-face中的绝对网址。我已经设置了一个简单的demo来展示这一点。

据推测，谣言起源于这样的情况：如果切换到相对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';”的行。零件将成功！

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

3 个答案: