@ font-face가 Firefox에서는 작동하지 않지만 Chrome에서는 작동합니다.

작동하는 데 사용 된 글꼴은 오늘 CSS가 변경되지 않아도 작업을 중단했습니다. firebug net 패널에서 .woff가 다운로드되는 것을 볼 수 있습니다 (이상한 두 번, 첫 번째 DL은 영원히 굴러 서 완료되지 않습니다). FF9/10에서 테스트되었습니다. 내 파이어 폭스에서 작업을 수행 곳 - http://dev.florianweber.me/bf3buttons/# :@ font-face가 Firefox에서는 작동하지 않지만 Chrome에서는 작동합니다.

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

} 

a.css3button, button, input[type="submit"], input[type="reset"], input[type="button"] { 
    .. 
    font-family: "bebasNeueRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    .. 
}

난에서 그것을 가지고 : 여기 내 CSS입니다. 충돌을 일으킬 수있는 것은 무엇입니까?

출처

2012-01-20 red

문제를 재현하는 데 절대적으로 필요한 것을 포함하도록 코드를 자르십시오. – kba

나는 그 모든 것을 보여 주었는데, 원인이 무엇인지 알았 기 때문에 아마 이미 고칠 수 있었을 것입니다. – red

글꼴 다람쥐 - http://www.fontsquirrel.com/fontface/generator에서 생성 해보십시오. –

우리는 Firefox가 싫어하는 .css 파일을 제공하는 CDN 도메인을 사용했습니다. .css에있는 글꼴 파일에 대한 하드 경로를 설정했는데 현재 작동하고있는 것 같습니다. :)

font-family: 'BebasNeueRegular'; 
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot'); 
src: url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), 
    url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.woff') format('woff'), 
    url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.ttf') format('truetype'), 
    url('http://site.com/sites/default/themes/theme/fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); 
font-weight: normal; 
font-style: normal;

또 다른 방법 :

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

출처

2012-01-20 12:03:38 red

@font-face { 
    font-family: 'BebasNeueRegular';

및

font-family: "bebasNeueRegular"

은 동일하지 않다. 오타를 조심 하십시요. font-family는 대소 문자를 구분할 수 있습니다.

출처

2012-01-20 11:53:04 pduersteler

좋은 캐치, 불행히도 이것은 문제가 아니었고 여전히 오타가 수정되었습니다. – red

-2

내가 파이어 폭스는 글꼴 이름 diffrent로드 것을 알아 냈어.

이것은 나에게 트릭을주었습니다. 시도해 보시고 좋은 하나인지 모르겠지만 작동합니다. 대괄호없이 시도하십시오.

font-family: 'bebas_neueregular', Bebas Neue, 'Bebas Neue', bebas_neueregular;

출처

2014-02-19 13:18:03 MBouwman

이미 해결 된 질문에 대한 관련성이없는 대답입니다. – red

위의 답변이 작동하지 않는다면이 문제를 해결할 수있는 또 다른 방법입니다. – MBouwman

@ font-face가 Firefox에서는 작동하지 않지만 Chrome에서는 작동합니다.

답변

관련 문제