Il y a peu de temps je faisais état d'une méthode "à l'épreuve des balles" pour insérer votre propre police dans vos pages web.
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 */
}
}
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 !