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:///)
Firefox는 file:///기본적으로 매우 엄격한 "file uri origin"( ) 정책을 제공합니다. 다른 브라우저처럼 작동하도록하려면으로 이동하여 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>
통해 발견
아무도 언급하지 않은 쉬운 해결책 중 하나는 base64 인코딩을 사용하여 글꼴을 CSS 파일에 직접 포함시키는 것입니다.
If you're using fontsquirrel.com, in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.
This also has the fringe benefit of reducing page load time because it requires one less http request.
I'd mention that some fonts have issues in firefox if their filename contains specific characters. I've recently run into an issue with the font 'Modulus' which had a filename '237D7B_0_0'. Removing the underscores in the filename and updating the css to match the new filename solved this problem. Other fonts with similar characters don't have this issue which is very curious...probably a bug in firefox. I'd recommend keeping filenames just to alphanumeric characters.
For this font in particular you should be using the Google Font API:
http://code.google.com/webfonts/family?family=Droid+Sans
If you still want to use FontSquirrel's kit generator, use the Smiley hack option to eliminate local font problems. After you've generated a kit, check that the generated demo.html works in FireFox. I bet it does. Now upload it to your server -- I bet it works there too since FontSquirrel is awesome.
However, if you broke the generated kit code while integrating it into your project, use the standard methods of debugging -- check for 404's and go line by line until you find the problem. WOFF should definitely work in FF, so thats a good place to start.
Finally, if none of this works, update FireFox. I wrote all this assuming that you are using the latest; but you didn't specify what version you are checking in, so that could be your problem too.
Try nerfing the local source declaration in your @font-face directives.
There's a known bug in either Firefox or the Google Font API that prevents the variants of fonts to be used if the font is installed locally, and matches the defined local name:
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
To effectively nerf the local declaration, just make your local source string some nonsense. The generally accepted convention for this is to use a the smiley unicode character ("☺"). Why? Paul Irish has a great explanation up on his blog:
http://paulirish.com/2010/font-face-gotchas/#smiley
Are you testing this in local files or off a Web server? Files in different directories are considered different domains for cross-domain rules, so if you're testing locally you could be hitting cross-domain restrictions.
Otherwise, it would probably help to be pointed to a URL where the problem occurs.
Also, I'd suggest looking at the Firefox error console to see if any CSS syntax errors or other errors are reported.
Also, I'd note you probably want font-weight:bold in the second @font-face rule.
Using an .htaccess Access Control Allow Origin rule didn't work for me when I was confronted with this issue.
Instead, in IIS in the web.config insert the system.webServer block shown below.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
This worked like a charm for me. If you need to restrict access to particular domain, replace the * with the domain.
I was having the same problem getting a font to display properly in Firefox. Here is what I found to work for me. Add a slash before the directory holding the font in the url attribute. Here is my before and after versions:
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);
}
notice the leading slash before 'fonts' in the url? This tells the browser to start at the root directory and then access the resource. At least for me - Problem Solved.
Can you check with firebug if do you get some 404? I had problems in the pass and I found that the extension was the same but linux file.ttf is different from file.TTF... and it worked with all browsers except firefox.
Wish it helps!
This is a problem with how you setup your font-face's paths. Since you didn't start the path with a "/", Firefox will attempt to find the font's based on the path the stylesheet's in. So basically, Firefox is looking for your font in the "root/css/font" directory instead of the "root/font" directory. You can easily fix this by either moving the font folder to the css folder, or adding a / to the beginning of your font paths.
Try this out:
@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";
}
Try this....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
I had a similar problem. The fontsquirel demo page was working in FF but not my own page even though all files were coming from the same domain!
It turned out that I was linking my stylesheet with an absolute URL (http://example.com/style.css) so FF thought it was coming from a different domain. Changing my stylesheet link href to /style.css instead fixed things for me.
Perhaps your problem is a naming-issue, specifically with regard the use (or not) of spaces and hyphens.
I was having similair issue, which i thought i had fixed by placing the optional quotes (') around font-/family-names, but that actually implicitly fixed a naming issue.
I'm not completely up-to-date on the CSS-specification, and there is (at leat to me) some ambiguity in how different clients interpret the specs. Additionally, it also seems related to PostScript naming conventions, but please correct me if i'm wrong!
Anyway as i understand it now, your declaration is using a mixture of two possible distinct flavors.
@font-face {
font-family: "DroidSerif Regular";
If you'd consider Droid the actual family-name, of which Sans and Serif are members, just like for instance their children Sans Regular or Serif Bold, then you either use spaces everyhere to concatinate identifiers, OR you remove spaces and use CamelCasing for the familyName, and hyphens for sub-identifiers.
Applied to your declaration, it would look something like this:
@font-face {
font-family: "Droid Serif Regular";
OR
@font-face {
font-family: DroidSerif-Regular;
I think both should be perfectly legal, either with or without the quotes, but i've had mixed success with that between various clients. Maybe, one day, i have some time to figure-out the details on this/these isseu/s.
I found this article helpful in understanding some of the aspects involved: http://mathiasbynens.be/notes/unquoted-font-family
This article has some more details on PostScript specifically, and some links to an Adobe specification PDF: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
No need to mess around with settings just remove the quotes and spaces from the font-family:
this
body {font-family: "DroidSerif Regular", serif; }
becomes this
body {font-family: DroidSerifRegular, serif; }
In my case, I sloved problem with inserting font-face style code
<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>
direclty in header on your index.html or php page, in style tag. Works for me!
Because of that this is one of the top Google results for this problem I would like to add what solved this problem for me:
I had to remove the format(opentype) from the src of the font-face, then it worked in Firefox as well. It worked fine in Chrome and Safari before that.
May be its not because of your code, Its because of your Firefox configuration.
Try this from Tool bar Western to Unicode
View > Text Encoding > Unicode
If you are trying to import external fonts you face one of the most common problem with your Firefox and other browser. Some time your font working well in google Chrome or one of the other browser but not in every browser.
There have lots of reason for this type of error one of the biggest reason behind this problem is previous per-defined font. You need to add !important keyword after end of your each line of CSS code as below:
Example:
@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;
}
Description: Enter above code in your CSS file or code here. In above example replace "Hacen Saudi Arabia" with your font-family and replace url as per your font directory.
If you enter !important in your css code browser automatically focus on this section and override previously used property. For More details visit: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
I had the same problem and solved it by adding meta for content:
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
This happens in Firefox and Edge if you have Unicode texts in your html.
I don't know how you created the syntax as I neved used svg in font declaration, but Font Squirel has a really good tool to create a bullet proof syntax font-face from just one font.
http://www.fontsquirrel.com/fontface/generator
Could also be the use of the URL in the path of the font-face tag. If you use "http://domain.com" it doesn't work in Firefox, for me changing it to "http://www.domain.com" worked.
My problem was that Windows named the font 'font.TTF' and firefox expected 'font.ttf' i saw that after opening my project in linux, renamed the font to propper name and everything works
'Programing' 카테고리의 다른 글
| Observer와 Observable은 언제 사용해야합니까? (0) | 2020.05.13 |
|---|---|
| Scala 2.8에서 <: <, <% <및 = : =은 무엇을 의미하며 어디에 기록되어 있습니까? (0) | 2020.05.12 |
| Mercurial Repository와 Git 상호 운용성 (0) | 2020.05.12 |
| 문자열에서 임의의 네이티브 명령을 어떻게 실행합니까? (0) | 2020.05.12 |
| Python에서 Requests 라이브러리를 사용하여 "User-agent"보내기 (0) | 2020.05.12 |