Depuis les problèmes provoqués par l'utilisation de Cufon, je me suis éloigné de l'utilisation de ressources de polices externes, mais dernièrement, j'ai cherché des méthodes alternatives de chargement des polices pour voir s'il y avait une meilleure façon; de meilleures méthodes ont un moyen d'apparaître à l'improviste.
Il y a beaucoup de nouvelles méthodes là-bas, et des variations pour chaque méthode il semble; Dois-je utiliser typekit ? ou google webfonts (avec js ou css)? dois-je continuer à utiliser des polices de chargement localement (par exemple, la méthode générée par fontsquirrel.com)?
Je vais énumérer les méthodes qui semblent les plus bien reçues ci-dessous, avec quelques tests, mais vaut-il vraiment la peine de passer à une police Web? Il semble que cela porterait une charge de ressources plus élevée (requêtes http) et aurait moins de types de formats de fichiers (moins de compatibilité), etc. Mais il semble que les fichiers soient chargés de manière asynchrone et efficace dans la plupart des cas.
- Est-ce juste une question de situation et de besoin? Si c'est vrai, que sont-ils?
- Existe-t-il des différences drastiques entre ces méthodes?
- Existe-t-il une meilleure méthode que je n'ai pas répertoriée?
- Quels sont les avantages / inconvénients de la performance? Regardez? dépendances? compatibilités?
Je recherche vraiment les meilleures pratiques ici, les performances sont importantes, mais l'évolutivité et la facilité d'utilisation aussi. Sans parler de l'apparence et de la sensation.
Google CSS
- utilise uniquement une feuille de style externe
- utilise uniquement le plus petit type de fichier compatible
- peut utiliser
@importou<link>ou prendre le contenu de styleshee (@font-face) et le mettre directement dans votre propre feuille de style.
résultats de test
78ms load of html 36ms load of css
Méthode Google JS
- utilise
webfont.jspour charger le style - utilise uniquement le plus petit type de fichier compatible
- ajoute l'
:rootélément avec la classe - ajoute un script à la tête.
résultats de test
171ms load of html 176ms load of js 32ms load of css
Méthode Typekit
- ajoute l'
:rootélément avec la classe. - peut utiliser un
*.jsextrait de code ou un fichier de*.jsfichier chargé en externe - utilise à la
data:font/opentypeplace du fichier de police. - ajoute un script à la tête
- ajoute le CSS intégré à la tête
ajoute une feuille de style externe à la tête
vous pouvez facilement ajouter / supprimer / ajuster des polices et des sélecteurs ciblés à partir de typekit.com
résultats de test
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… Et la méthode Font Squirrel
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… Ou avec des données: méthode de police…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}