2010-12-05 2 views
3

Это код, созданный с помощью FontSquirrel, и отлично работающий в любом другом браузере (включая IE), но не в мощном Firefox! Что я делаю не так?@ font-face не работает в Firefox?

(ps- Я использую FF3.5)

Если вы не можете посмотреть мой пример, вот источник:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="robots" content="noindex, nofollow" /> 
<title>Fonts Firefox test</title> 

<style type="text/css"> 
/*********** CHEVIN @font-faces **********/ 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.ttf); 
font-weight: normal; 
font-style: normal; 
} 

/*********** @font-faces FOR IE **********/ 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.eot); 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.eot); 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.eot); 
} 

/* Styles */ 
h1 { 
font-family: ChevinLight, Arial, Helvetica, sans-serif; 
} 
h2 { 
font-family: ChevinBold, Arial, Helvetica, sans-serif; 
} 
p { 
font-family: ChevinExbold, Arial, Helvetica, sans-serif; 
} 

</style> 

</head> 
<body> 

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h1> 
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum enim ante, nec convallis massa. Cras ac arcu mollis diam laoreet laoreet. Suspendisse leo metus, aliquam nec dapibus a, porttitor id nulla.</p> 

</body> 
</html> 

Спасибо!

ответ

7

Firebug показывает, что старый добрый Foxy пытается загрузить версии *.eot, кажется глупым, но он просто загружает последнее определение.

Вы должны обернуть часть IE с conditional comment:

<!--[if IE]> 
@font-face { 
font-family: ChevinLight; 
src: url(uploads/fonts/chevilig-webfont.eot); 
} 
@font-face { 
font-family: ChevinBold; 
src: url(uploads/fonts/chevibol-webfont.eot); 
} 
@font-face { 
font-family: ChevinExbold; 
src: url(uploads/fonts/cheviextbol-webfont.eot); 
} 
<![endif]--> 

Другой путь был бы поставить определения IE в верхней части.

Некоторые ошибки:
https://bugzilla.mozilla.org/show_bug.cgi?id=472647 - Игнорируйте .eot или поддерживают его
https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - "Мы делать не (и не будет) поддержки EOT." [Так в оригинале]

Да, обычный Mozilla unpropress.

+0

Это сработало, спасибо вам большое! – Karlgoldstraw 2010-12-05 12:41:38