Ma page d'accueil utilise actuellement 5 polices Web - j'aimerais que ce soit 6 en raison de la prise en charge inégale de Helvetica Neue. L'une des polices est les icônes «FontAwesome», les 4 autres ne sont utilisées que pour un mot ou deux (c'est-à-dire que j'ai un titre qui lit «Optimisation» écrit en lettres qui ressemblent à un vieil ordinateur).
2 de ces polices sont disponibles via Google et je demande uniquement les lettres nécessaires (et cela fonctionne très bien). Cependant, les 2 autres proviennent de openfontlibrary.org et ne sont disponibles que dans un seul format. Ce qui n'est pas un gros problème (j'en aurai besoin de toute façon pour que les copies locales soient meilleures), un quickie avec le générateur Fontsquirrel.com @ font-face et je les ai dans plusieurs formats, et le CSS pour démarrer.
Et puis je teste le temps de chargement de ma page ... ugh. Je suppose qu'il serait possible pour moi de sous-définir mes copies locales, quelqu'un a-t-il de l'expérience dans ce domaine?
la source
Est-ce une déclaration littérale?
Si oui, pourquoi vous embêtez-vous à incorporer ces polices, sous-ensembles ou non? Vous ne devriez même pas optimiser dans ce cas, simplement supprimer . Créez des images du texte dont vous avez besoin et utilisez votre technique de remplacement de texte préférée. Vous ajoutez des requêtes HTTP et du temps de téléchargement sur votre site pour quelques mots .
la source
Pour faire le suivi, j'ai fini par utiliser les options avancées du générateur @ font-face pour sous-définir mes polices, donc je n'ai chargé que les caractères nécessaires.
L'une des options était d'encoder en Base64 les polices (ce qui m'a permis de les incorporer dans mon fichier CSS). Si la mémoire est suffisante, il Base64 code la
.woffet la.ttfpolice.Bien que j'aime prendre en charge autant d'utilisateurs que possible de navigateurs, j'ai décidé que cela ne valait pas la peine de ralentir les utilisateurs de navigateurs modernes avec des données supplémentaires, probablement redondantes, j'ai donc utilisé Modernizr (qui utilise yep / nope.js) pour charger de façon asynchrone un
CSSfichier séparé avec des références à tous les formats de police conformément à la syntaxe de police pare-balles renforcée .J'ai fait des allers-retours entre l'encodage Base64 de la
.woffpolice et l'inclusion du reste des déclarations de police dans leCSSfichier principal ou uniquement l'inclusion de l'encodage Base64.woffdans le fichier principalCSS, puis l'inclusion des autres formats dans unCSSfichier que j'ai chargé de manière asynchrone viaModernizr.load.Je préfère les temps de chargement rapides à l'esthétique, donc FOUC n'était pas une grande préoccupation, mais je noterai que la plupart des navigateurs ont en quelque sorte `` cligné des yeux '' sur les polices lors du chargement (ce qui était après que les polices encodées en Base64
CSSavaient été chargées) asynchrones.Sur le plan positif, une fois que les polices ont été chargées et stockées dans le cache (les en-têtes expirant depuis longtemps définis sur le serveur), le `` clignotement '' a été éliminé et j'ai pu charger des ensembles étendus de polices afin que les utilisateurs qui parlent d'autres langues (et utilisent le Widget de traduction Google inclus) verrait toujours du texte stylisé.
Comme c'était mon propre site, j'ai pu expérimenter mais je le faisais en grande partie pour "montrer", je suis plus conservateur avec les sites clients.
Une autre technique que j'ai implémentée consistait à mettre toutes les
.svgpolices dans un seul fichier et à les identifier chacune avec son propre ID plutôt que de les avoir chacune dans un fichier séparé comme le produit le générateur @ font-face.la source