為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Why does CSS' "@font-face" not work in FF8.0?

  • 5 回覆
  • 6 有這個問題
  • 3 次檢視
  • 最近回覆由 cor-el

more options

I am using embedded fonts via CSS' @font-face, which works perfectly in IE9, Safari 5.1.1 and Opera 11.52. However it does not work in FF8.0 (or Chrome 15.0.874.121) and falls back to Verdana.

Here is my CSS:

body,td,th { font-family: DragonwyckFont, Verdana, Geneva, sans-serif; }

@font-face { font-family: "DragonwyckFont"; src: url("../fonts/Dragonwyck_Normal.eot"); src: url("../fonts/Dragonwyck_Normal.eot?#iefix") format('embedded-opentype'), url("../fonts/Dragonwyck_Normal.ttf") format('truetype'); }

This is being tested on a W7 box, using localhost: on IIS.

Any help or advice would be much appreciated.

Thankyou in advance.

I am using embedded fonts via CSS' @font-face, which works perfectly in IE9, Safari 5.1.1 and Opera 11.52. However it does not work in FF8.0 (or Chrome 15.0.874.121) and falls back to Verdana. Here is my CSS: body,td,th { font-family: DragonwyckFont, Verdana, Geneva, sans-serif; } @font-face { font-family: "DragonwyckFont"; src: url("../fonts/Dragonwyck_Normal.eot"); src: url("../fonts/Dragonwyck_Normal.eot?#iefix") format('embedded-opentype'), url("../fonts/Dragonwyck_Normal.ttf") format('truetype'); } This is being tested on a W7 box, using localhost: on IIS. Any help or advice would be much appreciated. Thankyou in advance.

所有回覆 (5)

more options

Maybe it is caused by the ../ Does it work if you place the fonts in the same directory as the CSS file or if you use a full path that starts with the root (http://xxx.com/path/fonts/Dragonwyck_Normal.ttf)?

You may also need to send special access headers.

more options

Hi cor-el,

Thanks for your very quick reply, unfortunately the solutions you offered have been unsuccessful.

I did as you suggested (including deleting the relative path and placing the fonts in the same directory as the CSS) and followed all the advice given in the references you made.

I am not going across domains so Access Control Headers are not required.

Bizarrely, the link from the demo (https://developer.mozilla.org/en/CSS/@font-face) works perfectly but, when I replicate it using the full path to Dragonwyck_Normal.ttf, it doesn't.

My little brain is starting to fry and I must be doing something completely daft but, with just half a dozen lines of code, I fail to see how it could be more simple!

CSS: body,td,th { font-family: "Dragonwyck", serif; }

@font-face { font-family: "Dragonwyck"; src: url("Dragonwyck_Normal.ttf"); }

Any ideas?

Regards,

Chaindrive.

由 Chaindrive 於 修改

more options

You can try to check the font in case there is a problem with it.

Can you post a link?


A good place to ask advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25

more options

Cor-el, thank you!

The Fontface Generator worked perfectly!

I still am not sure why it should work in IE and the others but not FF but, hey-ho, I'm not going to worry too much about that at this time.

Once again, thanks for your help - very much appreciated!