[css] CSS @ font-face는 Firefox에서는 작동하지 않지만 Chrome 및 IE에서는 작동합니다.

다음 코드는 IE 7뿐만 아니라 Chrome 베타에서도 작동합니다. 그러나 Firefox에 문제가있는 것 같습니다. CSS 파일이 어떻게 포함되는지에 문제가 있다고 생각합니다. Firefox가 도메인 간 가져 오기에 너무 친숙하지 않다는 것을 알고 있습니다.

그러나 이것은 모두 정적 HTML 일 뿐이며 도메인 간 문제는 없습니다.

내 landing-page.html에서 CSS 가져 오기를 수행합니다.

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

main.css 내에 다음과 같은 또 다른 수입품이 있습니다.

@import url("reset.css");
@import url("style.css");
@import url("type.css");

그리고 type.css 내에서 다음 선언이 있습니다.

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"),
                url("font/droidserif-regular-webfont.woff") format("woff"),
                url("font/droidserif-regular-webfont.ttf")     format("truetype"),
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg");
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"),
        url("font/droidserif-bold-webfont.woff") format("woff"),
        url("font/droidserif-bold-webfont.ttf") format("truetype"),
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

type.css와 같은 위치에 “font”라는 디렉토리가 있습니다. 이 글꼴 디렉토리에는 모든 woff / ttf / svg 파일 등이 있습니다.

나는 이것에 걸려 있습니다. Chrome 및 IE에서는 작동하지만 Firefox에서는 작동하지 않습니다 . 이것이 어떻게 가능한지? 내가 무엇을 놓치고 있습니까?

답변

현지에서 사이트 운영`file:///` )

파이어 폭스는 매우 엄격한 “파일 URI 기원”(함께 제공 file:///에 가서, 그냥 다른 브라우저처럼 행동해야하는 🙂 정책이 기본적 about:config으로 필터, fileuri다음과 같은 환경 설정 토글 :

security.fileuri.strict_origin_policy

이 값을 false로 설정하면 다른 경로 수준에서 로컬 글꼴 리소스를로드 할 수 있어야합니다.

게시 된 사이트

아래 내 의견에 따라 사이트를 배포 한 후이 문제가 발생하면 문제를 자체 도메인 간 문제로 구성하는지 확인하기 위해 추가 헤더를 추가하려고 시도 할 수 있습니다. 상대 경로를 지정하기 때문에해서는 안됩니다. 그러나 어쨌든 시도해 볼 것입니다 : .htaccess 파일에서 요청되는 각 .ttf / .otf / .eot 파일에 대해 추가 헤더를 보내도록 지정하십시오.

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

솔직히 말해서, 나는 그것이 차이를 만들 것으로 기대하지는 않지만 시도해 볼 가치가 너무 간단합니다. 그렇지 않으면 base64 인코딩 을 사용하십시오. 글꼴 서체에 도 작동하지 않을 수 있습니다.

여기에 좋은 요약이 있습니다

답변

.htaccess에 다음을 추가하는 것 외에도 (감사합니다 @Manuel)

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

다음과 같이 webfont mime 유형을 .htaccess 파일에 명시 적으로 추가하려고 할 수 있습니다.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

결국 내 .htaccess 파일은 다음과 같습니다 (웹 글꼴이 모든 브라우저에서 작동하도록하는 섹션)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

답변

나도이 문제가 있었다. 나는 여기에 답을 찾았습니다 : http://www.dynamicdrive.com/forums/showthread.php?t=63628

이것은 firefox에서 작동하는 솔루션의 예입니다. 글꼴 글꼴 CSS 에이 줄을 추가해야합니다.

src: local(font name), url("font_name.ttf");

답변

동료가 “firefox에서는 작동하지 않지만 다른 곳에서는 작동하지 않는”글꼴 관련 문제에 대한 해결책을 찾았 기 때문에 여기에 그대로 두겠습니다.

문제는 Firefox가 font-family 선언으로 엉망이되어 결국 수정되었습니다.

body{ font-family:"MyFont" !important; }

추신 : 나는 또한 html5boilerplate을 사용하고있었습니다.

답변

나는 같은 문제를 겪고 있었다. @ font-face 규칙을 사용하여 H1, H2 또는 어떤 스타일을 타겟팅하는지 코드를 다시 확인하십시오. font-family: 'custom-font-family' Arial, Helvetica etcFirefox를 제외한 모든 브라우저에서 제대로 표시되고 나면 코마가 누락 된 것을 발견했습니다 . 나는 코마를 추가했고 효과가있었습니다.

답변

나는 정확히 같은 문제가 있었다. “fonts”라는 새 폴더를 만들어 wp_content에 넣었습니다. http://www.example.com/wp-content/fonts/CANDY.otf 와 같은 브라우저에서 액세스 할 수 있습니다

이전에는 fonts 폴더가 내 CSS 파일과 동일한 디렉토리에 있었고 @ font-face는 다음과 같습니다.

@font-face {
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

위에서 언급했듯이 Firefox에서는 작동하지 않지만 Chrome에서만 작동했습니다. 이제 절대 경로를 사용했기 때문에 작동합니다.

@font-face {
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

답변

Mac에서 ff4를 실행하면이 문제가 정확히 발생했습니다. 로컬 개발 서버가 실행 중이고 @ font-face 선언이 정상적으로 작동했습니다. 나는 라이브로 마이그레이션했으며 FF는 첫 번째 페이지로드에서 올바른 유형을 ‘플래시’하지만 더 깊게 탐색하면 서체가 브라우저 스타일 시트로 기본 설정되었습니다.

솔루션이 .htaccess에 다음 선언을 추가하는 것으로 나타났습니다.

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

통해 발견

답변

현지에서 사이트 운영file:/// )

게시 된 사이트

답변

답변

답변

답변

답변

답변

현지에서 사이트 운영`file:///` )