Tirer le meilleur parti des polices variables sur les polices Google

J'ai passé des années à développer la famille récursive Sans & Mono Font (avec une équipe fantastique!), Et il est enfin disponible sur Google Fonts!

Vous voulez l'utiliser immédiatement? Voici le code intégré pour la famille de polices variables récursive complète de Google Fonts (mais pour une flexibilité et des performances optimales, lisez la suite!).

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Recursive a commencé comme ma thèse de maîtrise de conception de type à Kabk Typemedia. Plus tard, mon type de fonderie, Arrow, a été chargé par Google Fonts de terminer et de libérer récursif en tant que police open source.

Explorez récursif et ses capacités sur recursive.design.

Recursive est une famille de polices polyvalente pour les sites Web et le code, offrant aux développeurs et aux concepteurs un mélange d'esthétique moderne et de technologie de police de pointe.

Clarifions: les polices variables contiennent une gamme de styles dans un seul fichier, permettant aux utilisateurs de sélectionner les styles de manière fluide. Ces plages sont appelées axes variables , représentant des paramètres comme le poids, la largeur, la taille optique, l'inclinaison, etc. Recursive vous permet de contrôler la "monospaceté" (de mono à SANS) et la "désinvolture" (des styles linéaires aux styles brossés). Chaque famille de polices peut avoir plusieurs axes, une considération de conception clé.

Google Fontts a ajouté des polices variables, mais beaucoup (y compris récursifs) offrent beaucoup plus d'options stylistiques que l'interface par défaut ne le montre. Pour plus de facilité d'utilisation, Google Fonts simplifie l'affichage, montrant principalement l'axe "poids". Cependant, cela cache les 64 styles prédéfinis de récursive et cinq axes variables. La page Google Fonts affiche huit styles et un axe, tandis que Recursive offre en fait beaucoup plus.

Recursif peut être divisé en quatre "sous-familles":

• Sans linéaire: une police SANS-Serif proportionnelle standard (indiquée sur les polices Google).
• Sans occasionnel: une police proportionnelle "Brush Casual".
• Mono Linear: une police en monospace standard.
• Mono Casual: une police "Brush Casual" monospace.

La visualisation est plus facile que de le décrire. Deux tables (une pour SANS, une pour Mono) illustrent les 64 instances nommées (non montrées ici pour Brevity). L'interface Google Fonts n'en montre que huit, plus l'axe de poids.

Bien que cette approche de poids uniquement soit compréhensible étant donné la base d'utilisateurs diversifiée de Google Fonts, il limite le potentiel de la police. L'API Google Fonts propose une solution.

Comprendre les polices variables et leur efficacité

Les développeurs Web savent ne pas servir les JPEG surdimensionnés. Des principes similaires s'appliquent aux polices. Les caractères de sous-ensemble et l'utilisation de la compression WOFF2 réduisent la taille du fichier.

Les polices variables sont comme des fichiers vidéo: ils contiennent des gammes d'informations (axes variables) qui peuvent être coupées ou "épinglées" à des valeurs spécifiques, en réduisant la taille du fichier. Contrairement à la vidéo, les polices utilisent des formes vectorielles. Les polices variables ont plusieurs "emplacements source" (images clés). Les styles sont créés en interpoant mathématiquement entre ces emplacements (deltas). Faire réduire une police variable signifie éliminer les deltas inutiles.

Par exemple, l'axe occasionnel de Recursive interpole entre les formes de lettres "linéaires" et "occasionnelles". L'animation Ampersand Glyph (non présentée ici) le démontre.

Chaque axe ajouté double généralement le nombre de dessins. L'API Google Fontts vous permet de sélectionner uniquement les axes dont vous avez besoin, ce qui donne des tailles de fichiers plus petites.

Tags d'axe variable

Les abréviations de l'axe sont des étiquettes à quatre lettres (minuscules pour les axes définis par Microsoft, majuscules pour les axes personnalisés). Cinq axes standard existent:

• wght - poids
• wdth - largeur
• opsz - Taille optique
• ital - italique
• slnt - l'inclinaison

Recursive utilise trois axes personnalisés ( MONO , CASL , CRSV ) plus wght et slnt .

API Google Fonts

L'interface Google Fonts génère une URL qui appelle l'API Google Fontts. Cette URL a des pièces:

1. L'URL de l'API ( https://fonts.googleapis.com/css2 )
2. Paramètres de la famille des polices
3. Propriété font-display

Pour utiliser le poids régulier du récursif (sans linéaire), utilisez:

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

Ou, en html:

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

Ensuite, appliquez la police en CSS:

 <code>body { font-family: 'Recursive', sans-serif; }</code>

Valeurs de l'axe par défaut: MONO 0 , CASL 0 , wght 400 , slnt 0 , CRSV 0 .

Spécification des styles ou des axes

L'API propose deux approches:

1. Listing des axes et des valeurs spécifiques.
2. Listing des axes et des gammes.

Pour obtenir un style décontracté, utilisez Recursive:CASL@1 . Pour mono régulière occasionnel:

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

Pour régulier et audacieux:

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google Fonts sert souvent une police variable unique couvrant plusieurs styles demandés. Pour la production, demandez uniquement les styles nécessaires. L'utilisation des axes variables offre une flexibilité.

Obtenir la police variable complète

Pour maximiser la flexibilité, utilisez des axes variables. Au lieu de Recursive:wght@400;700 , utilisez Recursive:[email protected] (ou Recursive:[email protected] pour la plage de poids complète). Ajouter des axes de manière alphabétique: Recursive:wght,[email protected],0..1 .

L'URL de police variable complète:

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

En html:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

Équilibrage de la flexibilité et de la taille du fichier

Chaque axe augmente la taille du fichier. Omettre les axes inutilisés. Pour les styles décontractés mono avec des poids variables:

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

(Remarque: ce qui précède peut ne pas fonctionner actuellement correctement. Reportez-vous à l'article d'origine pour les mises à jour.)

Plusieurs familles de polices peuvent être ajoutées, alphabétisées par leur nom.

En utilisant des polices variables

Les axes standard utilisent les propriétés CSS standard ( font-weight: 425; ). Tous les axes utilisent font-variation-settings . Pour un style très lourde décontracté:

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings fonctionnent bien avec les propriétés personnalisées CSS.

De plus amples détails sur la conception de polices variables sont disponibles sur variableFonts.io et CSS-Tricks.

Performance de police variable

L'utilisation des 64 styles récursifs car les fichiers séparés totalisent ~ 6,4 Mo. La police variable est d'environ 537 Ko. Un WOFF2 récursif sous-ensemble avec la plage de poids complète est de 60 Ko; Un seul style est de 25 Ko. L'utilisation de trois poids économise ~ 15 Ko avec la police variable. Le sous-ensemble de police variable complet est de 281 Ko. Au-delà de la taille du fichier, les polices variables offrent une flexibilité de conception. Google Fonts optimise la livraison de polices.

Le reste de l'article d'origine est omis par Brivity, mais il continue avec des informations supplémentaires sur l'utilisation de l'API, l'exploration d'autres polices variables et la promotion du travail de l'auteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!