Question

我正在尝试通过@font-face CSS规则加载字体。除了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生成的，所以理论上应该是完美的。我已经尝试了实时的http header插件，它表明它根本没有被请求。虽然通过Google网络字体加载的字体效果很好。

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

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

非常感谢任何建议，谢谢。

Answer 1

知道了！

这是因为我在本地安装了字体。因此，通过使用the 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;
}

Answer 2

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

希望有所帮助。

为什么这个@ font-face代码在Firefox 3.6中不起作用？

2 个答案: