web font loading recipes
1.0.0
Un tas de démos pour différentes stratégies de chargement de polices Web. Certains d'entre eux sont inclus sur un guide complet des stratégies de chargement des polices, certaines d'entre elles sont plus expérimentales .
Les démos sont hébergées sur https://www.zachleat.com/web-fonts/demos/
Étant donné que les polices Web sont une amélioration progressive et avec une prise en charge croissante de l'API de chargement de police CSS, nous pouvons attendre avec impatience une période où nous n'aurons pas besoin d'installer un polyfill dans l'en-tête (pour un chargement de police encore plus rapide). Les recettes API de chargement CSS de chargement CSS simplifiées sont les valeurs par défaut, mais les versions polyfilées sont incluses pour une prise en charge plus large du navigateur - rien que seules les versions polyfulées afficheront les polices Web dans Internet Explorer et les navigateurs Web Edge (qui n'ont pas de prise en charge de l'API de chargement CSS Font Charging).
font-display: swap@font-facepreload<link>font-display: swap with preload<link> TAG et CSS : @font-facefont-display et preloadSemblable à ce qui précède, mais sans utiliser de classe, en utilisant uniquement l'API de chargement de police CSS. Cela ne nécessite aucune modification du CSS, injecte les polices Web à l'aide de JS par programme. J'ai vu cette méthode pour la première fois dans le manuel WebFont de @bramstein.
.style.fontFamily (ne fonctionne bien qu'avec une famille par page), a d'abord vu cela dans un tweet de @SimevidasCharge à deux étapes, en utilisant un fichier de police romain dans la première étape (avec une cycle de police).
preload<link> tag et javascript : API de chargement de police CSSfont-display: optional avec JavaScript.preload , avec un secours en polyfill imitant font-display: optional<link> Tag et JavaScript : API de chargement de police CSS et FontfaceObserver PolyfillCe ne sont pas nécessairement des stratégies de chargement de polices par eux-mêmes, mais ce sont des améliorations supplémentaires que vous pouvez superposer et associer à des stratégies existantes.
Reposez-vous des polices Web sur les vitesses de connexion lente.
prefers-reduced-motion Reposez-vous des polices Web lorsque l'utilisateur a permis Reduce Motion .
save-data Reposez-vous des polices Web lorsque l'utilisateur a activé le mode Data Saver .
Vous verrez probablement des articles de blog à un moment donné.
font-display: optionalAllez. ?
Les anciens navigateurs faisaient du temps sans un temps mort, ce qui a fait des polices Web un seul point de défaillance. L'utilisation de WOFF2 ne coupe la moutarde des navigateurs modernes qui ont un délai d'expiration de trois secondes pour les polices Web. Nous sommes un texte anti-invisible ici, mais cette approche mérite d'être mentionnée.
font-synthesis n'est pas un bon produit final.
<style> Injection Tout ce qui utilise JavaScript pour injecter un nouveau <style> avec des blocs @font-face à l'intérieur. Vraiment mauvais coût de repeindre - éviter cela. Ceci est utilisé dans la méthode URI de données asynchrones ci-dessus, mais est également courant dans les méthodes pires performantes.
font-display: optional et preloadpreload avec font-display: optional est un anti-motiffont-display (mélange des valeurs de font-display à travers une font-family )Cette méthode n'a actuellement pas de support croisé. J'espère que cela changera - en apporter plus.
swap / 3 optional ) C'est une chose courante que les gens essaient - ils chargent de manière asynchrone le CSS (et uniquement le CSS). Heck, j'ai utilisé ce comportement avant de commencer à étudier le chargement des polices Web.
@supports and font-displayfont-displayfont-display ne s'appuie pas (et fonctionne bien sans dépendances JS)@supports ne fonctionne pas avec les descripteurs de Font-Face.font-family Mettez deux polices Web ou plus font-family dans une seule pile font-family .
Échec : l'algorithme de correspondance de police sélectionne la première police Web qui correspond et tente de le charger (en ignorant les familles de polices Web suivantes). Même si vous preload la première étape du sous-ensemble, elle échangera en raison de la priorité de l'ordre font-family .
Code
Démo
MISE À JOUR : Bien que vous puissiez atténuer le problème ci-dessus avec font-display , peut-être en modifiant l'ordre de la pile font-family et de la commande de blocs de @font-face , il y a toujours des problèmes avec la suppression de la police Web de sous-ensemble inutile de la page après la grande version. Les caractéristiques de la police qui se produisent avec les glyphes qui franchissent ces limites de fichiers de police seront brisées (kerning, ligatures, et cetera). De même, vous ne pouvez pas supprimer un objet FontFace Paired CSS à l'aide de l'API de chargement de police CSS (selon la spécification).
** Prenez note que ces méthodes s'étonneront dans Internet Explorer et Edge en tirant parti de leur comportement de chargement de police par défaut.
