0

Chrome and Safari are showing the (local) be fonts correctly, but Firefox isn't. The code I got from Fontsquirl added ' marks in the code, which I got rid of, but it's still not working:

Original code:

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

I changed it into:

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

Fonts are loaded in the same folder as the stylesheet.

This is part of the stylesheet regarding the navigation:

#navigation .sf-menu a {
display: inline;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: #008abf; 
border-radius: 2px;
padding: 0 5px;
height: 26px;
line-height: 26px;
font-weight: normal;
letter-spacing: 1px;
font-family: frutigerboldcn;

How do I fix this? Thanx in advance

4

2 回答 2

0 
@font-face {
    font-family: 'ArialRounded';
    src: url('ArialRounded.eot');
    src: local('ArialRounded'), url('fonts/ArialRounded.eot'); /* for firefox */
    }

@font-face {
    font-family: 'ArialRounded';
    src: url('ArialRounded.woff') format('woff'),
    src: local('ArialRounded'), url('fonts/ArialRounded.woff'); /* for firefox */
    url('ArialRounded.svg#ArialRounded') format('svg');
    src: local('ArialRounded'), url('fonts/ArialRounded.svg'); /* for firefox */
    }
于 2013-11-14T09:25:52.007 回答
0

将以下内容放入您的 .htaccess 中，一切都会好起来的，至少在现代 FF 版本上是这样。

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

在这里查看有关 Stack Overflow 的完整讨论： CSS @font-face not working with Firefox, but working with Chrome and IE

于 2013-10-31T12:56:03.057 回答