Depuis les problèmes causés par l'utilisation Cufon J'ai renoncé à utiliser des ressources de polices externes, mais dernièrement, j'ai cherché d'autres méthodes de chargement des polices pour voir s'il n'y avait pas une meilleure façon de faire ; les meilleures méthodes ont une façon de surgir de nulle part.
Il y a beaucoup de nouvelles méthodes et des variantes pour chacune d'entre elles, semble-t-il. kit d'encodage ? ou polices de caractères google (avec js ou css) ? Dois-je continuer à utiliser les polices à chargement local (par exemple, la méthode générée par fontsquirrel.com) ?
Je vais énumérer ci-dessous les méthodes qui semblent les mieux accueillies, avec quelques tests, mais cela vaut-il vraiment la peine de passer à une police Web ? Il semble qu'il y aurait une plus grande charge de ressources (requêtes http) et 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 simplement une question de situation et de besoin ? Si oui, quels sont-ils ?
- Y a-t-il des différences radicales entre ces méthodes ?
- Existe-t-il une meilleure méthode que je n'ai pas mentionnée ?
- Quels sont les avantages et les inconvénients de la performance ? L'aspect ? les dépendances ? les compatibilités ?
Je suis vraiment à la recherche des meilleures pratiques. Les performances sont un élément important, mais aussi l'évolutivité et la facilité d'utilisation. Sans oublier l'aspect et la convivialité.
J'ai supprimé le code de la question pour faciliter la lecture, le code peut être vu sur les pages de test fournies.
Google CSS
- utilise uniquement une feuille de style externe
- utilise uniquement le plus petit type de fichier compatible
- peut utiliser
@importo<link>ou prendre le contenu de la feuille de style (@font-face) et le mettre directement dans votre propre feuille de style.
URL de la page de test : http://leftdeaf.com/so/gwebfontcss.html
résultats des tests
78ms load of html 36ms load of css
Méthode Google JS
- utilise
webfont.jspour charger les styleshet - utilise uniquement le plus petit type de fichier compatible
- ajoute
:rootavec la classe - ajoute script à la tête.
URL de la page de test : http://leftdeaf.com/so/gwebfontjs.html
résultats des tests
171ms load of html 176ms load of js 32ms load of css
Méthode Typekit
- ajoute
:rootavec la classe. - peut utiliser
*.jsextrait ou fichier chargé en externe*.jsfichier - utilise
data:font/opentypeau lieu du fichier de police. - ajoute script à l'en-tête
- ajoute le css intégré à l'en-tête
-
ajoute une feuille de style externe à l'en-tête
vous pouvez facilement ajouter/supprimer/ajuster les polices et les sélecteurs ciblés de typekit.com
URL de la page de test : http://leftdeaf.com/so/typekitjs.html
résultats des tests
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
& la méthode de l'écureuil de police
@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 la méthode data:font
@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;
}test à venir
