CSS @font-face - que signifie "src : local('')" ?

Question

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

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

@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 smiley me laisse perplexe. Mais le nombre d'urls dans le src l'est tout autant - pourquoi recommandent-ils autant de fichiers et seront-ils tous envoyés au navigateur lorsqu'une page sera rendue ? Y a-t-il un risque à supprimer tous les fichiers sauf le .ttf ?

Answer 1

Si vous lisez les notes du générateur de polices de caractères de font-squirrel, vous verrez qu'il s'agissait d'un gotcha de paul irish.

Voici l'extrait de son article de blog :

---

Et concernant @font-face syntaxe

Je recommande désormais la variante du smiley pare-balles plutôt que la syntaxe pare-balles originale.

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

Du poste à l'épreuve des balles :

Oui, c'est un visage souriant. La spécification OpenType indique que tout caractère unicode de deux octets ne fonctionnera pas du tout dans un nom de police sur Mac, ce qui réduit la probabilité que quelqu'un publie une police avec un tel nom.

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

• Webkit+Les logiciels de gestion des polices de caractères peuvent perturber les références locales, comme transformer les glyphes en blocs A.

• Sous OS X, le logiciel de gestion des polices peut modifier les paramètres du système pour afficher une lorsque vous essayez d'accéder à une police local() qui est accessible en dehors de Library/Fonts. Plus de détails sur mon post "bulletproof". Font Explorer X est également connu pour perturber d'autres choses dans Firefox.

• Même si c'est peu probable, vous pourriez référencer une police local() qui est complètement différente de ce que vous que vous pensez qu'elle l'est. (Article de Typophile sur polices différentes, même nom). Au minimum, c'est un risque, et vous céder le contrôle de la police à la fois au le navigateur et la machine hôte. Ce risque risque ne vaut peut-être pas l'avantage de d'éviter le téléchargement de la police.

Il s'agit là de problèmes plutôt marginaux, mais cela vaut la peine d'y réfléchir.

Answer 2

La fonction local() est une astuce css destinée à empêcher IE6-8 de télécharger des polices qu'il ne peut pas utiliser (il ne peut utiliser que les 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. La fonction local() permettra à IE de sauter la src du bas, sans gaspiller de bande passante pour télécharger des polices qu'il ne peut pas utiliser, et d'aller directement à la police dans le fichier .eot (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).

Plus d'informations ici : http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Answer 3

@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.