web-dev-qa-db-fra.com

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

J'utilise @font-face pour la première fois et a téléchargé un kit de polices à partir 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 visage souriant m'a laissé perplexe. Mais il en va de même pour le nombre d'URL dans le src - pourquoi recommandent-ils autant de fichiers et seront-ils tous envoyés au navigateur lorsqu'une page est rendue? Y at-il un mal à supprimer tout sauf le .ttf?

cssfont-face
128
stephenmurdoch

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

Voici l'extrait de son article de blog :

Et .. concernant @font-face _ syntaxe

Je recommande maintenant la variante de smiley à l'épreuve des balles par rapport à la syntaxe à l'épreuve des 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 poteau 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 le risque que quelqu'un ait publié une police portant ce 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 lors de la tentative d'accès à une police locale () accessible en dehors de Library/Fonts. Plus de détails sur mon poste pare-balles. Font Explorer X est également connu pour gâcher d’autres choses dans Firefox.

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

Ce sont toutes de jolies questions dans l'affaire Edge, mais cela vaut la peine d'être examiné.

89
corroded

Le local () est un hack css pour détourner IE6-8 du téléchargement de polices qu’il ne peut pas utiliser (il ne peut utiliser que des polices au format EOT).

Explained: La dernière propriété src a la priorité dans la cascade CSS, ce qui signifie que la CSS sera analysée de bas en haut. Le local () fera IE sauter le src en bas, sans perdre de la bande passante en téléchargeant des polices qu’il ne peut pas utiliser, mais plutôt aller directement à la police dans .eot format (défini sur la ligne ci-dessus dans votre question) qu’il utilisera. Le smiley sert uniquement à s’assurer qu’il n’y aura pas de police locale portant ce nom (combinaison de caractères).

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

32
Magne