Le code suivant fonctionne dans Google Chrome bêta ainsi que dans IE 7. Cependant, Firefox semble avoir un problème avec cela. Je soupçonne que c'est un problème de la façon dont mes fichiers CSS sont inclus, car je sais que Firefox n'est pas trop amical à propos des importations inter-domaines.
Mais tout cela n'est que du HTML statique et il n'est pas question de cross-domaine.
Sur ma landing-page.html, je fais un import CSS comme ceci:
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />
Dans le fichier main.css, j'ai une autre importation comme ceci:
@import url("reset.css");
@import url("style.css");
@import url("type.css");
et dans le type.css j'ai les déclarations suivantes:
@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; }
J'ai un répertoire appelé "font" au même endroit que type.css. Ce répertoire de polices contient tous les fichiers woff / ttf / svg, etc.
Je suis perplexe sur celui-ci. Cela fonctionne dans Chrome et IE mais pas sur Firefox . Comment est-ce possible? Qu'est-ce que je rate?
<style>
balises et voir si vous avez le même problème?