Question

可能重复：
@font-face fonts only work on their own domain

我一直在处理我的博客模板，我正在使用@ font-face，但似乎字体不会在Firefox中加载。但它确实在Chrome，IE，Safari

上

这是我使用的@ font-face

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.eot');
    src: url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.woff') format('woff'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.ttf') format('truetype'),
         url('https://sites.google.com/site/directorybesttheme/font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

知道为什么以及如何解决？

Answer 1

类似的问题：

@font-face doesn't work in Firefox (but exact same code works on another site)
@font-face fonts only work on their own domain

默认情况下，Firefox只接受相关链接。如果要使用绝对链接或包含来自不同域的字体，则需要使用访问控制标题发送这些字体 - https://developer.mozilla.org/En/HTTP_Access_Control

Answer 2

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

我正在使用该代码并且它有效。不要忘记将fontkit上传到您的字体文件夹。

Firefox无法加载@ font-face？

2 个答案: