1

这让我很困惑。我正在使用 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;

}

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

4

3 回答 3

4

四处闲逛，我发现了 Firefox 的这个有趣的花絮：

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

尝试将这些字体 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 是相对的。

于 2012-12-23T22:13:08.580 回答
3

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

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

据推测，谣言源于这样的案例：如果切换到相对 URL 有帮助，那么很自然地假设 URL 的类型是问题所在。

于 2012-12-23T22:58:39.330 回答
0

我也遇到了你的问题，搜索了很多，但什么也没找到……所以我开始在我的 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';”的行 零件可以解决问题！

于 2015-11-08T08:24:41.217 回答