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

Posted 2023-03-06

【中文标题】为啥这个@font-face 代码在 Firefox 3.6 中不起作用？

【英文标题】：Why does this @font-face code not work in Firefox 3.6?为什么这个@font-face 代码在 Firefox 3.6 中不起作用？

【发布时间】：2011-12-18 17:03:39

【问题描述】：

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

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

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

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

【问题讨论】：

不会是因为没有.otf吧？

我已经尝试this solution在本地进行测试，没有任何区别。

【参考方案1】：

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

希望对您有所帮助。

【讨论】：

对此进行了调查，还有关于不从file:// URI 加载字体的规则。事实并非如此，但感谢您指出！

【参考方案2】：

知道了！

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