CSS @font-face는 Firefox와 함께 작동하지 않지만 Chrome 및 IE와 함께 작동합니다.
다음 코드는 IE 7뿐 아니라 Google Chrome 베타에서도 작동합니다.하지만 파이어폭스는 이것에 문제가 있는 것 같습니다.파이어폭스가 도메인 간 가져오기에 대해 그다지 우호적이지 않다는 것을 알고 있기 때문에, 저는 그것이 제 CSS 파일이 포함된 방식의 문제라고 생각합니다.
하지만 이것은 모두 정적인 HTML일 뿐이고 교차 도메인에 대한 질문은 없습니다.
랜딩 페이지.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 파일 등이 모두 들어 있습니다.
저는 이것에 대해 당황스럽습니다.그것은 크롬과 IE에서는 작동하지만 파이어폭스에서는 작동하지 않습니다.이것이 어떻게 가능한 걸까요?제가 무엇을 빠뜨리고 있나요?
로컬로 입니다.file:///
)
한 "originfileuri origin")을 .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>
.htaccess 파일에 webfont mime 유형을 명시적으로 추가할 수도 있습니다...다음과 같이:
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
다음은 파이어폭스에서 작동하는 솔루션의 예입니다. 글꼴 면 CSS에 이 줄을 추가해야 합니다.
src: local(font name), url("font_name.ttf");
제 동료가 "font-face가 Firefox에서 작동하지 않지만 다른 모든 곳에서 작동하는" 관련 문제에 대한 해결책을 찾았기 때문에 이 부분만 남겨두겠습니다.
문제는 Firefox가 글꼴 패밀리 선언을 잘못 작성했다는 것입니다. 이로 인해 다음과 같이 수정되었습니다.
body{ font-family:"MyFont" !important; }
PS: 저도 html5boiler plate를 사용하고 있었습니다.
저도 같은 문제를 겪고 있었습니다.@font-face 규칙을 사용하여 H1, H2 또는 원하는 스타일의 코드를 다시 확인합니다.그 후 혼수상태에 빠진 것을 발견했습니다.font-family: 'custom-font-family' Arial, Helvetica etc
파이어폭스를 제외한 모든 브라우저에서 정상적으로 표시되었습니다.혼수상태를 더했더니 효과가 있었습니다.
저도 똑같은 문제를 겪었습니다.저는 "fonts"라는 폴더를 새로 만들어서 wp_content에 넣어야 했습니다.http://www.example.com/wp-content/fonts/CANDY.otf 처럼 브라우저에서 액세스할 수 있습니다.
이전에 글꼴 폴더는 내 CSS 파일과 동일한 디렉터리에 있었고 @font-face는 다음과 같이 생겼습니다.
@font-face {
font-family: CANDY;
src: url("fonts/CANDY.otf");
}
위에서 언급했듯이, 이것은 파이어폭스에서 작동하지 않고 크롬에서만 작동했습니다.이제는 절대 경로를 사용했기 때문에 작동합니다.
@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>
을 통해 발견된.
아직 아무도 언급하지 않은 쉬운 해결책 중 하나는 base64 인코딩을 사용하여 글꼴을 직접 CSS 파일에 포함시키는 것입니다.
fontsquirrel.com 을 사용하는 경우 글꼴 키트 생성기에서 전문가 모드를 선택하고 아래로 스크롤한 다음 CSS 옵션에서 Base64 인코딩을 선택합니다. 다운로드한 글꼴 키트를 플러그 앤 플레이할 준비가 됩니다.
이것은 또한 하나의 http 요청을 덜 필요로 하기 때문에 페이지 로드 시간을 줄일 수 있는 부가적인 이점이 있습니다.
일부 글꼴은 파일 이름에 특정 문자가 포함되어 있으면 파이어폭스에서 문제가 발생합니다.최근에 파일 이름이 '237D7'인 'Modulus' 글꼴에 문제가 발생했습니다.B_0_0'입니다.파일 이름에서 밑줄을 제거하고 새 파일 이름과 일치하도록 CSS를 업데이트하면 이 문제가 해결되었습니다.비슷한 글자를 가진 다른 글꼴들은 이 문제가 없어서 매우 궁금합니다...아마도 파이어폭스의 버그일 것입니다.파일 이름은 영숫자로만 유지하는 것이 좋습니다.
특히 이 글꼴의 경우 Google Font API를 사용해야 합니다.
http://code.google.com/webfonts/family?family=Droid+Sans
그래도 FontSquirrel의 키트 생성기를 사용하려면 Smiley hack 옵션을 사용하여 로컬 글꼴 문제를 제거합니다.키트를 생성한 후 생성된 demo.html이 FireFox에서 작동하는지 확인합니다.그건 분명히 할 거야.이제 서버에 업로드하세요. Font Squirrel은 훌륭하기 때문에 서버에서도 작동할 것입니다.
그러나 생성된 키트 코드를 프로젝트에 통합하는 동안 이 코드를 손상시킨 경우에는 표준 디버깅 방법을 사용하여 404를 확인하고 문제를 찾을 때까지 한 줄씩 진행합니다.WOFF는 확실히 FF에서 작동해야 하므로, 그곳은 시작하기에 좋은 장소입니다.
마지막으로, 이 작업이 모두 수행되지 않으면 FireFox를 업데이트합니다.저는 당신이 최신 버전을 사용하고 있다고 가정하고 이 모든 것을 작성했습니다. 하지만 당신은 어떤 버전을 체크인하고 있는지 명시하지 않았기 때문에 그것도 당신의 문제일 수 있습니다.
선사보오십시용해에서 로컬 .@font-face
Firefox 또는 Google Font API에는 글꼴이 로컬로 설치되어 있고 정의된 로컬 이름과 일치하는 글꼴 변형을 방지하는 알려진 버그가 있습니다.
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
로컬 선언을 효과적으로 긴장시키려면 로컬 소스 문자열을 무의미하게 만드십시오.으로 받아들여지는 유니코드 문자( 문자입니다."☺"
폴 럴그까요왜? 폴 아이리쉬는 자신의 블로그에 훌륭한 설명을 올렸습니다.
http://paulirish.com/2010/font-face-gotchas/ #httpsy
로컬 파일에서 테스트합니까, 아니면 웹 서버에서 테스트합니까?서로 다른 디렉토리에 있는 파일은 교차 도메인 규칙에 대해 서로 다른 도메인으로 간주되므로, 로컬에서 테스트하는 경우 교차 도메인 제한이 발생할 수 있습니다.
그렇지 않으면 문제가 발생하는 URL을 지정하는 것이 도움이 될 수 있습니다.
또한 파이어폭스 오류 콘솔을 통해 CSS 구문 오류 또는 기타 오류가 보고되는지 확인하는 것이 좋습니다.
또한 두 번째 @font-face 규칙에서 글꼴 가중치: bold를 원할 수도 있습니다.
이것은 글꼴의 경로를 설정하는 방법과 관련된 문제입니다.경로를 "/"로 시작하지 않았으므로 Firefox는 스타일시트가 있는 경로를 기준으로 글꼴을 찾습니다.따라서 기본적으로 Firefox는 "root/font" 디렉터리 대신 "root/css/font" 디렉터리에서 사용자의 글꼴을 찾습니다.글꼴 폴더를 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";
}
이 문제가 발생했을 때 .htaccess Access Control Allow Origin 규칙을 사용하는 것은 효과가 없었습니다.
대신 web.config의 IIS에 시스템을 삽입합니다.아래에 표시된 webServer 블록입니다.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
이것은 저에게 매력적으로 작용했습니다.특정 도메인에 대한 액세스를 제한해야 하는 경우 *를 도메인으로 대체합니다.
Firefox에서 글꼴을 올바르게 표시하는 데 동일한 문제가 발생했습니다.여기 제가 저를 위해 일하는 것을 발견했습니다.URL 속성의 글꼴을 보유한 디렉토리 앞에 슬래시를 추가합니다.이전 버전과 이후 버전은 다음과 같습니다.
B E F O R E:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(fonts/grilcb__.ttf);
}
A F T E R:
@font-face
{ font-family: "GrilledCheese BTN";
src: url(/fonts/grilcb__.ttf);
}
URL에서 'slash' 앞에 선행 슬래시가 있다는 것을 아십니까?이것은 브라우저가 루트 디렉토리에서 시작한 다음 리소스에 액세스하도록 지시합니다.적어도 나에게는 - 문제가 해결되었습니다.
외부 글꼴을 가져오려고 하면 Firefox 및 기타 브라우저에서 가장 일반적인 문제가 발생합니다.때때로 글꼴이 Google Chrome 또는 다른 브라우저 중 하나에서 잘 작동하지만 모든 브라우저에서 잘 작동하지는 않습니다.
이러한 유형의 오류에는 여러 가지 이유가 있습니다. 이 문제의 가장 큰 이유 중 하나는 이전의 정의된 글꼴입니다.아래와 같이!important 키워드를 CSS 코드의 각 줄 끝에 추가해야 합니다.
예:
@font-face
{
font-family:"Hacen Saudi Arabia" !important;
src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
font-family:"Hacen Saudi Arabia" !important;
}
설명:여기에 CSS 파일 또는 코드에 위의 코드를 입력합니다.위의 예에서 "Hacen Saudi Arabia"를 글꼴 계열로 바꾸고 글꼴 디렉터리에 따라 url을 바꿉니다.
CSS 코드 브라우저에서 !important를 입력하면 자동으로 이 섹션에 초점을 맞추고 이전에 사용된 속성을 재정의합니다.자세한 내용은 https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html 를 참조하십시오.
여기 목록에 추가할 것이 하나 더 있습니다. 로컬지경우할을 하면, 을정▁a,를 하면,src
일반 글꼴 이름과 일치하는 이름을 사용하면 Firefox의 전체 규칙을 위반합니다(Firefox만 해당).예:
@font-face {
font-family: code;
src: local(Monaco),
url(monaco.woff2) format("woff2"),
local(monospace);
}
오류는 .2 기준)에서 "" "" " " " " " " " " " (Times) " " 때문에 가 기본값됩니다.src
글꼴의 합니다(" 이일반글일다니치합이과값름꼴의(다"().monospace
는 다음 값은 모두 동일한 방식으로 실패합니다.
cursive
fantasy
monospace
sans-serif
serif
system-ui
확실히 에지 케이스이지만(아마 버그일 수도 있지만) 누군가에게 도움이 될 수 있습니다.일반 글꼴로 되돌아갈 수 없으며, 어떤 이유로 인해 같은 이름의 로컬 글꼴을 참조해야 하는 경우 따옴표 사이에 넣어야 합니다.
404개가 있는지 파이어버그에 확인해 주시겠습니까?패스에 문제가 있어서 확장자가 동일하지만 linux file.ttf가 파일과 다르다는 것을 발견했습니다.TTF... 그리고 파이어폭스를 제외한 모든 브라우저에서 작동했습니다.
도움이 되길 바랍니다!
이것을 시도해보세요.
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
저도 비슷한 문제가 있었습니다.모든 파일이 동일한 도메인에서 왔음에도 불구하고 폰트스키렐 데모 페이지는 FF에서 작동했지만 내 페이지는 작동하지 않았습니다!
알고 보니 제 스타일시트를 절대 URL(http://example.com/style.css) 과 연결하고 있었으므로 FF는 다른 도메인에서 온 것으로 생각했습니다.내 스타일시트 링크 href를 /style.css로 변경하는 것이 나를 위해 수정되었습니다.
특히 공백 및 하이픈 사용과 관련하여 명명 문제가 문제일 수 있습니다.
저는 비슷한 공기 문제를 겪고 있었는데, 폰트/패밀리 이름 주위에 선택적 따옴표(')를 붙여 수정했다고 생각했지만, 실제로는 암묵적으로 명명 문제를 해결했습니다.
저는 CSS 사양에 대해 완전히 최신이 아니며, (적어도) 다른 고객이 사양을 해석하는 방식에 약간의 모호함이 있습니다.추가적으로 PostScript 명명 규칙과도 관련이 있는 것 같습니다만, 틀리면 수정 부탁드립니다!
어쨌든 제가 지금 이해한 바와 같이, 당신의 선언은 두 가지 다른 맛의 혼합물을 사용하고 있습니다.
@font-face {
font-family: "DroidSerif Regular";
예를 들어 자녀인 Sans Regular 또는 Serif Bold와 마찬가지로 Droid가 실제 성씨라고 생각하면 여기에 공백을 사용하여 식별자를 결합하거나 공백을 제거하고 패밀리 이름에 CamelCasing을 사용하고 하위 식별자에는 하이픈을 사용합니다.
선언문에 적용하면 다음과 같습니다.
@font-face {
font-family: "Droid Serif Regular";
OR
@font-face {
font-family: DroidSerif-Regular;
인용문이 있든 없든 둘 다 완벽하게 합법적이어야 한다고 생각하지만, 저는 다양한 고객들 사이에서 성공을 거두었습니다.언젠가는 이 seu/s에 대한 세부 사항을 파악할 시간이 있을지도 모릅니다.
저는 이 기사가 관련된 몇 가지 측면을 이해하는 데 도움이 된다는 것을 알게 되었습니다. http://mathiasbynens.be/notes/unquoted-font-family
이 문서에는 PostScript에 대한 자세한 내용과 Adobe 사양 PDF 링크가 나와 있습니다. http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
설정을 복잡하게 만들 필요 없이 글꼴 패밀리에서 따옴표와 공백만 제거하면 됩니다.
이것.
body {font-family: "DroidSerif Regular", serif; }
이것이 됩니다.
body {font-family: DroidSerifRegular, serif; }
나의 경우, 나는 글꼴 스타일 코드를 삽입하는 문제를 좋아요.
<style type="text/css">
@font-face {
font-family: 'Amazone';font-style: normal;
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/
src: local('Amazone'), url(font/Amazone.woff) format('woff');}
</style>
index.directy 또는 php 페이지의 헤더, 스타일 태그.나한테 효과가 있어요!
그렇기 때문에 이것이 이 문제에 대한 최고의 구글 결과 중 하나이기 때문에 저는 이 문제를 해결한 것을 추가하고 싶습니다.
폰트페이스의 src에서 포맷(opentype)을 제거해야 했고, 파이어폭스에서도 작동했습니다.그 이전에는 크롬과 사파리에서 잘 작동했습니다.
코드 때문이 아니라 Firefox 구성 때문일 수 있습니다.
사해보오시에서 이것을 .Tool bar
서부에서 유니코드로
View > Text Encoding > Unicode
저도 같은 문제를 가지고 있었고 내용에 대한 메타를 추가하여 해결했습니다.
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
HTML에 유니코드 텍스트가 있는 경우 Firefox 및 Edge에서 이 문제가 발생합니다.
Firefox를 사용하면 웹 글꼴을 완전히 끌 수 있습니다.이것이 사건이거나 나였습니다.
설정을 설정하려면 환경설정 > 내용 > 고급으로 이동한 후 확인란을 선택합니다.
글꼴 선언에 svg를 사용하지 않았기 때문에 구문을 어떻게 만드셨는지는 모르겠지만, 글꼴 스퀴렐은 하나의 글꼴로 방탄 구문 글꼴을 만들 수 있는 정말 좋은 도구를 가지고 있습니다.
http://www.fontsquirrel.com/fontface/generator
글꼴-면 태그의 경로에서 URL을 사용할 수도 있습니다."http://domain.com "을 사용하면 Firefox에서 작동하지 않습니다. 저는 "http://www.domain.com "로 변경했습니다.
Windows에서 글꼴 이름을 'font'로 지정한 것이 문제였습니다.TTF'와 파이어폭스는 'font.ttf'를 예상했습니다. 리눅스에서 프로젝트를 연 후 글꼴 이름을 적절한 이름으로 바꾸고 모든 것이 작동하는 것을 보았습니다.
언급URL : https://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
'programing' 카테고리의 다른 글
PHP 및 InnoDB 엔진을 사용하는 mysqli_rollback()의 문제 (0) | 2023.08.29 |
---|---|
ADB 설치가 실패하고 INSTALL_FAILED_가 발생함테스트_전용 (0) | 2023.08.29 |
<%=%> 식이 서버 프로세서의 속성 값으로 컴파일 오류를 일으키는 이유는 무엇입니까? (0) | 2023.08.29 |
저장 프로시저가 있는지 확인하는 방법은 무엇입니까? (0) | 2023.08.29 |
'System'의 형식 이니셜라이저입니다.데이터. 엔티티.내부의.AppConfig'에서 예외를 발생시켰습니다. (0) | 2023.08.29 |