L'histoire commence dans une contrée fort fort lointaine d'un monde merveilleux qu'est CSS.

Je m'amusais à coder une page test en HTML 5 quand j'ai eu envie de tenter la règle @font-face dans ce contexte.

Habituellement je code les différents média dans la même feuille de style avec une règle @media, j'ai donc dans cet essai collé ma règle @font-face à l'intérieur comme suit :

@media all{
@font-face {  
	font-family: "Daseong";  
	src: url( fonts/daseong.eot); /* IE */  
	src: local("Jumpcrew Cologne"), url(fonts/daseong.ttf) format("truetype"); /* non-IE */  
}
}

Photo d'écran comparative du bug font-face avec Firefox

Et là surprise : mes tests sur les différents navigateurs montrent que seul Firefox n'applique pas la police embarquée (IE7, Safari, opéra), Je suppose que chrome a le même comportement que Safari, mais ça reste à tester.

Par contre si on sort la déclaration @font-face de la règle @media comme suit :

@font-face {  
	font-family: "Daseong";  
	src: url( fonts/daseong.eot); /* IE */  
	src: local("Jumpcrew Cologne"), url(fonts/daseong.ttf) format("truetype"); /* non-IE */  
}
@media all{
...
}

Dans ce cas de figure Firefox comprends la règle et l'applique correctement. Alors, serait on face à un bug ? Qui a raison ? Firefox ou les autres navigateurs ? (Il faut que j'aille lire la spécification à ce propos ... )

Si vous avez des informations à ce propos, je suis preneur !