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;
}la source
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>Georgianpolices Web locales . J'utilise la méthode font-squirrel, et j'aimerais aussi voir une excellente réponse à cette question.@font-facedéclarations pare-balles , peut-être que vous trouverez des informations utiles. paulirish.com/2009/bulletproof-font-face-implementation-syntaxRéponses:
Tout d'abord, je vais clarifier quelque chose sur l'offre de Google. Il chargera en fait le plus petit format que votre navigateur peut gérer. WOFF propose des fichiers de petite taille et votre navigateur le prend en charge, c'est donc celui que vous voyez. WOFF est également assez largement soutenu. Cependant, dans Opera par exemple, vous obtiendrez probablement la version TrueType de la police.
La logique de la taille du fichier est également, je crois, pourquoi Font Squirrel les essaie dans cet ordre. Mais ce sont surtout des spéculations de ma part.
Si vous travaillez dans un environnement où chaque requête et chaque octet comptent, vous devrez effectuer un profilage pour savoir lequel fonctionne le mieux pour votre cas d'utilisation. Les utilisateurs ne verront-ils qu'une seule page et ne reviendront jamais? Si tel est le cas, les règles de mise en cache n'ont pas autant d'importance. S'ils naviguent ou reviennent, Google peut avoir de meilleures règles de mise en cache que votre serveur. La latence est-elle le plus gros problème ou la bande passante? En cas de latence, visez moins de requêtes, alors hébergez-le localement et combinez les fichiers autant que possible. S'il s'agit de bande passante, choisissez l'option qui se termine par le plus petit code et le plus petit format de police.
Maintenant, passons à la considération CSS vs JS. Examinons le morceau suivant de HTML:
Dans de nombreux cas,
script1,style1etstyle2serait le blocage. Cela signifie que le navigateur ne peut pas continuer à afficher le document tant que cette ressource n'a pas été chargée (bien que les navigateurs modernes gèrent un peu cela). Ce qui peut en fait être une bonne chose, surtout avec les feuilles de style. Cela empêche un flash de contenu non stylé, et il empêche également le changement géant qui se produirait lors de l'application des styles (et le changement de contenu est vraiment ennuyeux en tant qu'utilisateur).D'un autre côté,
script2ce ne serait pas un blocage. Il peut être chargé plus tard et le navigateur peut passer à l'analyse et à l'affichage du reste du document. Cela peut donc être bénéfique aussi.En parlant spécifiquement des polices (et plus précisément de l'offre de Google), je m'en tiendrai probablement à une méthode CSS (j'aime bien
@importparce qu'elle continue de styler avec la feuille de style, mais cela pourrait être juste moi). Le fichier JS chargé par le script ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) est plus volumineux que la@font-facedéclaration, et ressemble à beaucoup plus de travail. Et je ne pense pas que le chargement de la police elle-même (le WOFF ou le TTF) soit bloquant, donc cela ne devrait pas trop retarder les choses. Personnellement, je ne suis pas un grand fan des CDN, mais le fait est qu'ils sont VRAIMENT rapides. Les serveurs de Google battront la plupart des plans d'hébergement partagé par un glissement de terrain, et comme leurs polices sont si populaires, les gens peuvent même les avoir déjà mises en cache.Et c'est tout ce que j'ai.
Je n'ai aucune expérience avec Typekit, donc je l'ai laissé hors de ma théorie. S'il y a des inexactitudes, sans compter les généralisations entre les navigateurs pour des arguments, veuillez les signaler.
la source
Je pense que vous avez très bien traité des temps de chargement dans votre question. De mon point de vue, il y a quelques sources qui devraient être ajoutées à la liste, et quelques autres considérations qui devraient être examinées pour avoir une vue complète des options.
Quelques autres sources de polices réputées
cloud.typography
http://www.typography.com/cloud/
D'après ce que je peux dire, les polices sont intégrées sous forme de données dans un fichier CSS:
Voici mes spécifications:
Voici leur description de très haut niveau de leur déploiement .
Fonts.com
Je n'ai pas utilisé ce service, mais c'est un fournisseur de polices très établi, et les informations qu'ils ont répertoriées sur leur site sont assez impressionnantes. Je n'ai pas de spécifications sur leurs méthodes exactes, mais voici ce que je sais qu'ils ont:
FontSpring
Affilié à FontSquirrel. Les polices peuvent être achetées ici pour un prix fixe. Les fichiers de polices et le CSS d'accompagnement sont fournis, pour être déployés sur votre propre serveur, un peu comme FontSquirrel.
Spécifications étendues
En ce qui concerne les avantages et les inconvénients généraux de chaque service de police, voici quelques comparaisons:
Taille de la bibliothèque de polices
Tarification
Qualité de la police
La qualité des polices Web peut varier un peu. Cela peut englober des éléments tels que les formes de lettres elles-mêmes ou l'espacement ou la taille du jeu de caractères. Tous ces éléments déterminent l'impression générale de qualité qu'une police donnera. Bien que les options gratuites aient de bonnes options, elles ont également des polices qui ne sont pas aussi de haute qualité, vous devez donc choisir avec soin parmi ces sources.
Qualité de police II: typographie
Il y a beaucoup de raffinements dans la typographie de bureau qui ont été très difficiles à obtenir dans les polices Web. Certains de ces services offrent des moyens de les fournir.
Prise en charge du navigateur
Cela se résume principalement aux formats de police pris en charge par chaque service. Les principaux sont:
Plus d'informations sur la règle @ Font-Face et des astuces utiles sur les polices Web
Tous ces services prennent en charge les principaux formats de police. Avec les polices auto-hébergées, tant que vous utilisez la bonne syntaxe, vous devriez être couvert. Voici une mise à jour 2011 de la syntaxe à l'épreuve des balles de FontSpring :
Performance I: Téléchargements
Pour autant que je sache, l'utilisation de la syntaxe ci-dessus permet aux navigateurs de saisir le format spécifique qui leur convient, il n'y a donc pas de téléchargements inutiles sur les formats de police qui ne fonctionnent pas.
Les services payants comme Fonts.com, Typekit ou Typography.com utilisent des méthodes pour détecter le format correct, puis fournissent le bon format de police, souvent sous forme de données base64 dans un fichier CSS.
D'après ce que je peux voir, les différences dans les méthodes que vous avez énumérées ci-dessus sont assez négligeables pour les utilisateurs d'Internet haut débit (cela semble être une différence de <200 ms), mais pourraient valoir la peine d'être prises en compte pour les appareils sur des réseaux plus lents, en particulier pour les visites de pages non mises en cache.
Performance II: sous-ensemble
Si vous savez qu'il n'y aura que certains caractères que vous souhaitez utiliser, vous pouvez créer votre police avec un sous-ensemble de caractères et ainsi réduire la taille du téléchargement.
Performance III: Livraison
Support linguistique
Test et mise en œuvre
la source
Eh bien, comme tu es après
la réponse est (comme toujours dans la conception de sites Web): cela dépend!
Une chose est sûre, je ne recommanderais pas d'utiliser l'approche JS (illustrée dans votre deuxième exemple).
Personnellement, je n'aime pas créer des éléments de présentation et des styles CSS en fonction de Javascript, même si la grande majorité des utilisateurs l'ont activé. Il s'agit de ne pas mélanger les choses.
Et comme vous pouvez le voir dans votre exemple donné, il existe une sorte de FOUC (flas de contenu non stylé), car la page est déjà rendue par le navigateur avant que la police ne soit disponible. Dès qu'elle l'est, la page est redessinée. Et plus le site est grand, plus l'impact (sur les performances) est grand!
Je n'utiliserais donc jamais aucune solution JS pour l'incorporation de polices.
Voyons maintenant les méthodes CSS pures.
Depuis un certain temps, voici une discussion sur "vs @ import". Personnellement, je préfère éviter d'utiliser @import et toujours utiliser
<link>uniquement. Mais c'est principalement une question de préférences personnelles. La seule chose que vous ne devriez jamais faire est de mélanger les deux!Local vs CDN
Lorsque vous décidez d'héberger vos fichiers de polices localement ou d'utiliser un CDN, alors à mon avis cela dépend principalement du nombre de polices différentes et des polices respectives que vous souhaitez intégrer.
Pourquoi est-ce important ou joue-t-il un rôle?
Du point de vue des performances, je recommanderais d'inclure la police Base64 encodée dans votre (une) feuille de style. Mais seulement le format .woff, car il est utilisé par presque tous les navigateurs modernes, ce qui signifie pour la majorité de vos visiteurs. Pour tous les autres utilisateurs vivent avec la demande supplémentaire.
Mais en raison de la "surcharge" causée par le codage Base64 et la taille d'un fichier de police (même au format .woff), cette technique ne doit être utilisée que si vous n'avez pas plus de 3 ou 4 polices différentes. Et assurez-vous toujours que votre serveur délivre les fichiers (CSS) gzipés.
Le gros avantage de cela est que vous n'avez pas de demande supplémentaire pour le fichier de police. Et après le chargement de la première page (quelle que soit la page de votre site), le fichier CSS est mis en cache. C'est également un avantage si vous utilisez le cache d'application HTML5 (ce que vous ferez certainement).
Outre le fait qu'un auteur ne doit pas utiliser plus d'un maximum de 3 ou 4 polices différentes sur son site, jetons un œil à la méthode d'utilisation du CDN de Google.
Tout d'abord, sachez que vous pouvez (et devez toujours) inclure toutes les polices souhaitées en une seule
<link>, comme ceci:Cela entraînera la réponse suivante:
Comme vous pouvez le voir, il existe 9 fichiers de polices différents, ce qui signifie un total de 10 demandes (y compris celle de l'élément lien), si l'utilisateur ne dispose pas d'une ou plusieurs des polices demandées installées localement. Et ces demandes sont répétées à chaque nouvelle demande de page sur votre site (bien qu'aucune donnée ne soit transférée)! De plus, la réponse à la demande de l '
<link>n'est jamais mise en cache.Recommandation:
Après tout, je recommande vraiment d'inclure vos fichiers de polices au format .woff Base64 encodés dans votre feuille de style!
Voir ce bel article pour un exemple et une description de la façon de le faire!
la source
J'utilise la méthode css en ligne car la surcharge de la demande supplémentaire est supérieure à l'augmentation de la taille lors de l'encodage bease64. Ceci est également compensé par la compression gizip par le serveur des fichiers css.
Une autre option consiste à utiliser le chargement asynchrone des polices, mais le plus souvent, les utilisateurs verront les polices apparaître après le chargement.
Quelle que soit la méthode, vous pouvez réduire la taille du fichier de police en n'incluant que les jeux de caractères que vous utiliserez.
la source
Personnellement, j'utilise Google Fonts. Ils ont une belle variété de choix et ils ont récemment amélioré la compression des polices en passant également à la compression Zopfli . Google s'efforce de rendre le Web plus rapide, donc j'imagine que plus d'optimisation sur cette partie viendra également d'eux.
Quoi que vous choisissiez comme livraison de polices externalisée, vous obtiendrez toujours des réductions de vitesse par les demandes d'obtention des polices. La meilleure chose, vue du point de vue de la vitesse, serait de servir les polices vous-même. Si vous ne vous souciez pas des millisecondes supplémentaires nécessaires pour charger à partir d'une livraison externalisée, vous devriez y aller si vous pensez que la facilité de les utiliser vaut les millisecondes.
Je ne connais pas Typekit et les autres, mais avec Google Fonts, vous pouvez choisir de recevoir des sous-ensembles spécifiques et une plage de caractères pour accélérer encore plus la livraison.
Choisir un sous-ensemble:
Choisir une plage de caractères:
Vous pouvez utiliser dns-prefetch pour améliorer encore plus la vitesse avec la livraison des polices.
Je pense, et j'espère, que Google fera tout son possible pour accélérer au maximum la livraison de leurs polices. Les millisecondes nécessaires pour les charger ne nuisent pas à mon site Web, alors je les utilise avec plaisir.
Longue histoire courte:
Si la livraison des polices en quelques millisecondes nuit à votre site, par exemple en le faisant charger plus que la seconde recommandée, je pense que vous devriez les héberger vous-même.
la source
<link rel=dns-prefetch href='//fonts.googleapis.com'>Je l'utilise pour l'analyse, la cartographie thermique et les sous-domaines, pour une raison quelconque, il ne s'est pas enregistré pour fonctionner pour les polices Web externes. Et le temps de chargement diffère considérablement d'une police à l'autre, je suppose que si vous utilisez une police assez populaire (peut être mise en cache) ou seulement une sélection de polices, l'utilisation de polices Web est une excellente source de polices assez rapide. Je posterai des tests de vitesse ici sous peu.La meilleure option est d'importer les polices en utilisant ajax, comme ceci:
Je fais cela sur ma page Web et augmente de 9 points dans le test Google Insights.
la source
asyncattribut? Cela fait la même chose.