CSS @ font-face - que signifie «src: local ('☺')»?

J'utilise @font-facepour la première fois et j'ai téléchargé un kit de polices de fontsquirrel

Le code qu'ils recommandent d'insérer dans mon CSS est:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Maintenant, le truc du visage souriant m'a perplexe. Mais il en va de même pour le nombre d'urls dans le src - pourquoi recommandent-ils autant de fichiers et seront-ils tous envoyés au navigateur lorsqu'une page est rendue? Y a-t-il un problème à supprimer tout sauf le .ttf?

si vous lisez les notes dans le générateur de font-face de font-squirrel, vous verrez que c'était un piège de paul irish.

Voici l'extrait de son article de blog :

Et .. concernant la @font-facesyntaxe

Je recommande maintenant la variante de smiley pare-balles par rapport à la syntaxe pare-balles d'origine.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Du message pare-balles:

Oui, c'est un visage souriant. La spécification OpenType indique que les caractères Unicode à deux octets ne fonctionneront pas du tout dans un nom de police sur Mac, ce qui réduit la probabilité que quelqu'un ait réellement publié une police avec un tel nom.

Il y a plusieurs raisons pour lesquelles smiley est une meilleure solution:

• Le logiciel Webkit + Font Management peut gâcher les références locales, comme transformer des glyphes en blocs A.

• Sous OS X, le logiciel de gestion des polices peut modifier les paramètres système pour afficher une boîte de dialogue lorsque vous essayez d'accéder à une police locale () accessible en dehors de Bibliothèque / Polices. Plus de détails sur mon post pare-balles. Font Explorer X est également connu pour gâcher d'autres choses dans Firefox.

• Bien que cela soit peu probable, vous pouvez référencer une police local () qui est complètement différente de ce que vous pensez. (Message typophile sur différentes polices, même nom) À tout le moins, c'est un risque, et vous cédez le contrôle du type à la fois au navigateur et à la machine hôte. Ce risque peut ne pas valoir l'avantage d'éviter le téléchargement de polices.

Ce sont tous des problèmes assez complexes, mais cela mérite d'être pris en compte.

Le local (☺︎) est un hack css pour empêcher IE6-8 de télécharger des polices qu'il ne peut pas utiliser (il ne peut utiliser que des polices au format EOT).

Expliqué: La dernière propriété src est prioritaire dans la cascade CSS, ce qui signifie que le CSS sera analysé de bas en haut. Le local (☺︎) fera en sorte que IE saute le src en bas, sans gaspiller de bande passante pour télécharger des polices qu'il ne peut pas utiliser, et va plutôt directement à la police au .eotformat (défini sur la ligne ci-dessus dans votre question) qu'il utilisera. Le smiley est juste pour s'assurer qu'il n'y aura pas de police locale avec ce nom (combinaison de caractères).

En savoir plus ici: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face La dernière propriété src est prioritaire dans la cascade CSS, ce qui signifie que le CSS sera analysé de bas en haut.