3 Stimmen

@font-face funktioniert nicht in Firefox?

Dieser Code wurde von FontSquirrel generiert und funktioniert in jedem anderen Browser (einschließlich IE), aber nicht im mächtigen Firefox! Was mache ich falsch?

(ps- ich benutze FF3.5)

Wenn Sie mein Beispiel nicht sehen können, hier ist die Quelle:

<!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>

Gracias.

7voto

Ivo Wetzel Punkte 45471

Firebug zeigt, dass der gute alte Foxy versucht, die *.eot Versionen, scheint dumm, aber es lädt einfach die letzte Definition.

Sie sollten den IE-Teil mit einer bedingter Kommentar :

<!--[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]-->

Eine andere Möglichkeit wäre, die IE-Definitionen an den Anfang zu stellen.

Einige Bugs:
https://bugzilla.mozilla.org/show_bug.cgi?id=472647 - Entweder Sie ignorieren .eot oder Sie unterstützen es
https://bugzilla.mozilla.org/show_bug.cgi?id=520357 - "Wir nicht (und wird nicht) EOT unterstützen."[sic]

Ja, die übliche Mozilla Unproportionalität.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X