@ font-face在Firefox中不起作用(但完全相同的代码适用于其他网站)

时间:2010-06-23 18:45:31

标签: css fonts font-face typography

我有两个网站使用@ font-face相同的确切代码。字体文件托管在各自的站点上,路径正确。

一个有效,一个没有。 (当然,它适用于我的个人网站,而不是客户!)

我真的很欣赏这方面的一些新观点!

工作地点:

网站:http://example.com/

CSS文件:http://365.example.com/index.php?css=photos/style.v.1275845154

相关代码:

@font-face {
    font-family: 'JournalRegular';
    src: url('./themes/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('./themes/fonts/journal.ttf') format('truetype');
 }
body{
    background: url("http://labs.example.com/personal/library/images/BG.jpg");
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'JournalRegular', Georgia, 'Times New Roman', Times, sans-serif;
    color: #999;
 }

不工作的地方:

网站:http://www.example.org/

CSS文件:http://www.example.org/wp-content/themes/theme/style.css

相关代码:

@font-face {
    font-family: 'JournalRegular';
    src: url('http://example.org/wp-content/themes/theme/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('http://example.org/wp-content/themes/theme/fonts/journal.ttf') format('truetype');
 }
.title h1{
    float:left;
    background:url(images/blt-ttl1?.png) no-repeat 0 4px;
    margin:0px 0 5px;
    /* padding:8px 0 8px 34px; */
    color:#bd5f01;
    letter-spacing: .5pt
    font:24px/26px 'JournalRegular', Georgia, 'Times New Roman', Times, serif;
}

任何帮助都会非常感激!

3 个答案:

答案 0 :(得分:5)

这个问题的最终解决方案是:

    <FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>

将代码复制到.htaccess文件中,上传,完成后:firefox将显示你的@ font-face字体。

希望它适用于所有人!

答案 1 :(得分:4)

firefox默认只接受font-face的相对链接。link

使用HTTP access control或相关链接

答案 2 :(得分:3)

字体嵌入,即@font-face需要在每个域的基础上创建字体文件。

这是因为某些字体可能存在版权问题。

相关问题