4

我正在尝试通过@font-faceCSS 规则加载字体。除了 Firefox 3.6 之外，我已经让它在所有浏览器（包括 IE6）中都能正常工作，甚至可能更低。这是我当前的代码。

@font-face {
    font-family: 'DigitaldreamFatRegular';
    src:    url('../fonts/digitaldreamfat-webfont.eot');
    src:    url('../fonts/digitaldreamfat-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/digitaldreamfat-webfont.woff') format('woff'),
            url('../fonts/digitaldreamfat-webfont.ttf') format('truetype'),
            url('../fonts/digitaldreamfat-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

它是由Font Squirrel生成的，所以理论上应该是完美的。我已经尝试了 live http headers 插件，它表明它根本没有被请求。尽管通过 Google 网络字体加载的字体运行良好。

有谁知道 3.6 中可能导致此类问题的任何警告？我试过在本地和服务器上运行它，它没有任何区别。

请记住，我只在 Firefox 3.6 for Mac 上进行了测试。我将尝试查看 Windows 版本是否正常工作。

任何建议将不胜感激，谢谢。

4

2 回答 2

3

知道了！

这是因为我在本地安装了字体。因此，通过使用Paul Irish提出的 smily hack，我可以修复它。这是正确的代码。

@font-face {
    font-family: 'DigitaldreamFatRegular';
    src:    url('../fonts/digitaldreamfat-webfont.eot');
    src:    local('☺'), // This addition fixes it.
            url('../fonts/digitaldreamfat-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/digitaldreamfat-webfont.woff') format('woff'),
            url('../fonts/digitaldreamfat-webfont.ttf') format('truetype'),
            url('../fonts/digitaldreamfat-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
于 2011-10-31T13:05:19.370 回答
3

您是否从与您的网站相同的域运行字体？如果是，FF 默认不允许跨域字体。您可以在字体中添加“Access-Control-Allow-Origin”标题。这是有关如何执行此操作的链接http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

希望有帮助。

于 2011-10-31T14:01:15.650 回答