Syntaxe correcte du @Font-Face ?

Salut,

Personnellement je continue à utiliser la syntaxe suivante (et cela fonctionne très bien) :

@font-face{
font-family:"mafonte";
src:url("../font/mafonte.eot");
src:local("?"),
url("../font/mafonte.woff") format("woff"),
url("../font/mafonte.ttf") format("truetype"),
url("../font/mafonte.svg") format("svg");
font-weight:normal;
font-style:normal;}

Or la nouvelle syntaxe recommandée depuis le mois de Février est :

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
url('myfont-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Je me demande du coup si je dois mettre à jour ma syntaxe ou conserver la première plus simple qui fonctionne à priori sur tous les navigateurs récents jusqu'à IE6.

Votre avis ?
Modifié par yank (27 Oct 2011 - 12:04)

L'ancienne syntaxe a un petit bug, donc oui c'est mieux de passer à la nouvelle.

@font-face {
	font-family: 'MyFontFamily';
	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	     url('myfont-webfont.woff') format('woff'), 
	     url('myfont-webfont.ttf')  format('truetype'),
	     url('myfont-webfont.svg#svgFontName') format('svg');
	}

Source
Modifié par Patidou (27 Oct 2011 - 13:45)

Patidou a écrit :
L'ancienne syntaxe a un petit bug, donc oui c'est mieux de passer à la nouvelle.
Source

Merci pour ta confirmation

Voir également ce billet sur Typographisme : « Bonnes pratiques pour les déclarations @font-face »

La mise à jour en fin de billet n'est plus à jour.

Salut

En quoi exactement la mise à jour en fin de billet n'est plus à jour ?

Tout est là, y compris le rajout nécessaire pour les modes de compatibilité de IE9

Jep a écrit :
Salut

En quoi exactement la mise à jour en fin de billet n'est plus à jour ?

Tout est là, y compris le rajout nécessaire pour les modes de compatibilité de IE9

Je pense qu'il s'agit de cette partie :

?

au lieu de

?iefix

Ils ont simplifié la partie pour IE.

Ok, donc c'est bien ce que je pensais. Ce que j'ai écrit sur Typographisme est bien toujours d'actualité. La seul vraie différence est du à la gestion du format ("eot" vs. "embedded-opentype") qui est un faux problème dans la mesure ou c'est essentiellement du à un problème de configuration des serveur IIS (donc très spécifique tout de même)

Bon, ben je laisse l'article en l'état

Note : A ma connaissance, il n'y a aucune différence technique entre "?", "?iefix" et "?#iefix"