@ font-face не работает в Firefox? - PullRequest
3 голосов
/ 05 декабря 2010

Это код, сгенерированный из FontSquirrel и прекрасно работающий в любом другом браузере (включая IE), но не в мощном 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>

Спасибо!

1 Ответ

7 голосов
/ 05 декабря 2010

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

Вы должны обернуть часть IE условным комментарием :

<!--[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.» [Sic]

Да, обычный Мозилла распаковал.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...