Résumé
Cet article présente en détail les polices de remplacement ainsi que les API size-adjust
, ascent-override
, descent-override
et line-gap-override
. Ces API permettent d'utiliser des polices locales pour créer des polices de remplacement correspondant exactement ou exactement aux dimensions d'une police Web. Cela réduit ou élimine les décalages de mise en page causés par le changement de police.
Si vous préférez ne pas lire cet article, voici quelques-uns des outils que vous pouvez utiliser pour commencer à utiliser ces API immédiatement:
Outils du framework:
- @next/font: à partir des 13 prochains mois,
next/font
utilisera automatiquement les remplacements de métriques de police etsize-adjust
pour fournir des polices de remplacement correspondantes. - @nuxtjs/fontaine: à partir de Nuxt 3, vous pouvez utiliser
nuxt/fontaine
pour générer et insérer automatiquement des polices de remplacement correspondantes dans les feuilles de style utilisées par votre application Nuxt.
Outils hors framework:
- Fontaine: Fontaine est une bibliothèque qui génère et insère automatiquement des polices de remplacement qui utilisent des remplacements de métriques de police.
- Ce dépôt contient les remplacements de métriques de police pour toutes les polices hébergées par Google Fonts. Ces valeurs peuvent être copiées et collées dans vos feuilles de style.
Contexte
Une police de remplacement est un type de police utilisé lorsque la police principale n'est pas encore chargée ou lorsqu'il manque les glyphes nécessaires pour afficher le contenu de la page. Par exemple, le code CSS ci-dessous indique que la famille de polices sans-serif
doit être utilisée comme police de remplacement pour "Roboto"
.
font-family: "Roboto" , sans-serif;
Les polices de remplacement peuvent être utilisées pour afficher le texte plus rapidement (à l'aide de font-display: swap
). Par conséquent, le contenu de la page est lisible et utile plus tôt. Toutefois, historiquement, cela a été au détriment de l'instabilité de la mise en page: des décalages de mise en page se produisent généralement lorsqu'une police de remplacement est remplacée par la police Web. Toutefois, les nouvelles API décrites ci-dessous peuvent réduire ou éliminer ce problème en permettant de créer des polices de remplacement qui occupent le même espace que celles de leur police Web.
Amélioration des polices de remplacement
Il existe deux approches pour générer des polices de remplacement "améliorées". L'approche la plus simple utilise uniquement l'API de remplacement des métriques de police. L'approche plus compliquée (mais plus efficace) utilise à la fois l'API de remplacement des métriques de police et size-adjust
. Cet article explique ces deux approches.
Fonctionnement des remplacements de métriques de police
Introduction
Les forçages de métrique de police permettent de remplacer l'ascension, la descente et l'interligne d'une police:
- La montée mesure la distance la plus éloignée à partir de laquelle les glyphes d'une police s'étendent au-dessus de la ligne de base.
- La descente mesure la distance la plus éloignée située en dessous de la ligne de base par les glyphes d'une police.
- L'écart de ligne, également appelé "début", mesure la distance entre les lignes de texte successives.
Les forçages de métrique de police peuvent être utilisés pour remplacer l'incrément, la descente et l'interligne d'une police de remplacement afin qu'ils correspondent à l'ascension, à la descente et à l'interligne de la police Web. Par conséquent, la police Web et la police de remplacement ajustée auront toujours les mêmes dimensions verticales.
Les remplacements de métriques de police sont utilisés dans une feuille de style comme ceci:
body {
font-family: Poppins, "fallback for poppins";
}
@font-face {
font-family: "fallback for poppins";
src: local("Times New Roman");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Les outils figurant au début de cet article peuvent générer les valeurs de remplacement des métriques de police appropriées. Cependant, vous pouvez également calculer ces valeurs vous-même.
Calculer des remplacements de métriques de police
Les équations suivantes génèrent les remplacements de métrique de police pour une police Web donnée. Les valeurs de remplacement des métriques de police doivent être écrites sous forme de pourcentages (par exemple, 105%
) et non de nombres décimaux.
ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm
Par exemple, voici les forçages de métrique de police pour la police Poppins:
/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/
ascent-override: 105%; /* = 1050/1000 */
descent-override: 35%; /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */
Les valeurs de ascent
, descent
, line-gap
et unitsPerEm
proviennent toutes des métadonnées de la police Web. La section suivante de cet article explique comment obtenir ces valeurs.
Lecture des tableaux de polices
Les métadonnées d'une police (en particulier ses tableaux de polices) contiennent toutes les informations dont vous avez besoin pour calculer ses remplacements de métriques de police.
![Capture d'écran de la boîte de dialogue "Font Information" (Informations sur la police) dans FontForge. La boîte de dialogue affiche des métriques de police telles que "Typo Ascent", "Typo Descent" et "Typo Line Gap".](https://developer.chrome.com/static/blog/font-fallbacks/image/screenshot-the-font-info-bf9832673113a.png?authuser=6&hl=fr)
Voici quelques outils que vous pouvez utiliser pour lire les métadonnées d'une police:
- fontkit est un moteur de polices conçu pour Node.js. Cet extrait de code montre comment utiliser fontkit pour calculer les remplacements de métriques de police.
- Capsize est une bibliothèque de mise en page et de dimensionnement de police. Capsize fournit une API pour obtenir des informations sur différentes métriques de police.
- Le site Web fontdrop.info vous permet d'afficher les tableaux des polices et d'autres informations liées aux polices dans le navigateur.
- Font Forge est un éditeur de polices populaire pour les ordinateurs de bureau. Pour afficher
ascent
,descent
etline-gap
: ouvrez la boîte de dialogueFont Info
, sélectionnez le menuOS/2
, puis l'ongletMetrics
. Pour afficherUPM
: ouvrez la boîte de dialogueFont Info
, puis sélectionnez le menuGeneral
.
Comprendre les tableaux de polices
Vous remarquerez peut-être que des concepts tels que "ascent" sont désignés par plusieurs métriques (hheaAscent
, typoAscent
et winAscent
, par exemple). Cela est dû aux différentes approches adoptées par les systèmes d'exploitation pour le rendu des polices: les programmes sur les appareils OS X utilisent généralement des métriques de police hhea*
, tandis que les programmes sur les appareils Windows utilisent généralement les métriques de police typo*
(également appelées sTypo*
) ou win*
.
En fonction de la police, du navigateur et du système d'exploitation, une police s'affichera à l'aide des métriques hhea
, typo
ou win
.
Mac | Windows | |
Chromium | Utilise les métriques du tableau "hhea". | Utilise les métriques de la table de fautes de frappe si la valeur "USE_TYPO_METRICS" a été définie. Sinon, les métriques de la table "victoires" sont utilisées. |
Firefox | Utilise les métriques du tableau "typo" si "USE_TYPO_METRICS" a été défini. Sinon, utilise les métriques de la table "hhea". | Utilise les métriques de la table de fautes de frappe si la valeur "USE_TYPO_METRICS" a été définie. Sinon, les métriques de la table "victoires" sont utilisées. |
Safari | Utilise les métriques du tableau "hhea". | Utilise les métriques de la table de fautes de frappe si la valeur "USE_TYPO_METRICS" a été définie. Sinon, les métriques de la table "victoires" sont utilisées. |
Pour en savoir plus sur le fonctionnement des métriques de police sur différents systèmes d'exploitation, consultez cet article sur les métriques verticales.
Compatibilité multi-appareil
Pour la grande majorité des polices (par exemple, environ 90% des polices hébergées par Google Fonts), les remplacements de métriques de police peuvent être utilisés en toute sécurité sans connaître le système d'exploitation de l'utilisateur. En d'autres termes, pour ces polices, les valeurs de ascent-override
, descent-override
et linegap-override
restent exactement les mêmes, que les métriques hhea
, typo
ou win
s'appliquent. Ce dépôt fournit des informations sur les polices auxquelles cela s'applique ou non.
Si vous utilisez une police nécessitant des ensembles distincts de remplacements des métriques de police pour les appareils OSX et Windows, nous vous recommandons de remplacer les métriques de police et de size-adjust
uniquement si vous avez la possibilité de modifier vos feuilles de style en fonction du système d'exploitation de l'utilisateur.
Utiliser des remplacements de métriques de police
Étant donné que les remplacements de métriques de police sont calculés à l'aide de mesures provenant des métadonnées de la police Web (et non de la police de remplacement), ils restent identiques quelle que soit la police utilisée. Exemple :
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: "fallback for Poppins";
src: local("Arial");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
@font-face {
font-family: "another fallback for Poppins";
src: local("Roboto");
ascent-override: 105%;
descent-override: 35%;
line-gap-override: 10%;
}
Fonctionnement de l'ajustement de la taille
Introduction
Le descripteur CSS size-adjust
adapte de manière proportionnelle la largeur et la hauteur des glyphes de police. Par exemple, size-adjust: 200%
redimensionne les glyphes de police pour deux fois leur taille d'origine, tandis que size-adjust: 50%
réduit les glyphes de police à la moitié de leur taille d'origine.
En soi, size-adjust
a des applications limitées pour améliorer les polices de remplacement: dans la plupart des cas, une police de remplacement doit être légèrement réduite ou élargie (plutôt que proportionnellement mise à l'échelle) pour s'adapter à une police Web. Toutefois, en combinant size-adjust
avec des remplacements de métriques de police, il est possible de faire correspondre deux polices à la fois horizontalement et verticalement.
Voici comment size-adjust
est utilisé dans les feuilles de style:
@font-face {
font-family: "fallback for poppins";
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
En raison de la méthode de calcul de size-adjust
(qui est expliquée dans la section suivante), la valeur de size-adjust
(et les forçages de métrique de police correspondants) change en fonction de la police de remplacement utilisée:
body {
font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Calculer les remplacements d'ajustement de taille et de métrique de police
Voici les équations permettant de calculer size-adjust
et les remplacements de métriques de police:
size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)
La plupart de ces entrées (c'est-à-dire la montée, la descente et l'écart entre les lignes) peuvent être lues directement à partir des métadonnées de la police Web. Cependant, avgCharacterWidth
doit être approximatif.
Largeur de caractères moyenne approximative
En général, la largeur moyenne des caractères ne peut être qu'approximative. Toutefois, dans certains cas, elle peut être calculée exactement: par exemple, avec une police à chasse fixe ou lorsque le contenu d'une chaîne de texte est connu à l'avance.
Un exemple d'approche simpliste pour calculer avgCharacterWidth
consiste à prendre la largeur moyenne de tous les caractères [a-z\s]
.
![Graphique comparant la largeur de glyphes de Roboto [a-zs] individuels.](https://developer.chrome.com/static/blog/font-fallbacks/image/graph-comparing-width-5672b4755732f.png?authuser=6&hl=fr)
Toutefois, en pondérant tous les caractères de la même manière, vous risquez de sous-pondérer la largeur des lettres fréquemment utilisées (par exemple, e
) et de surcharger celles des lettres peu utilisées (par exemple, z
).
Une approche plus complexe améliorant la précision consiste à prendre en compte la fréquence des lettres et à calculer plutôt la largeur moyenne pondérée en fonction de la fréquence de [a-z\s]
caractères. Cet article constitue une bonne référence sur la fréquence des lettres et la longueur moyenne des mots dans les textes anglais.
![Graphique illustrant la fréquence des lettres pour l'anglais](https://developer.chrome.com/static/blog/font-fallbacks/image/a-graph-showing-letter-fr-ac59861459ed1.png?authuser=6&hl=fr)
Choisir une approche
Les deux approches présentées dans cet article présentent chacune des avantages et des inconvénients:
L'utilisation de remplacements de métriques de police en elles-mêmes est une bonne approche à utiliser si vous commencez à optimiser vos polices de remplacement. Bien qu'il s'agisse de la plus simple des deux approches, elle est généralement assez efficace pour réduire sensiblement l'ampleur des décalages de mise en page liés à la police.
En revanche, si vous souhaitez plus de précision et que vous êtes prêt à effectuer un peu plus de travail et de tests, l'intégration de
size-adjust
est une bonne approche. Lorsqu'elle est implémentée correctement, cette approche peut éliminer efficacement les décalages de mise en page liés à la police.
Choisir des polices de remplacement
Les techniques décrites dans cet article reposent sur l'utilisation de remplacements de métriques de police et d'size-adjust
pour transformer les polices locales largement disponibles, plutôt que d'essayer de trouver une police locale qui se rapproche le plus de la police Web. Lorsque vous choisissez des polices locales, il est important de garder à l'esprit que très peu de polices sont largement disponibles en local et qu'aucune police unique n'existe sur tous les appareils.
Arial
est la police de remplacement recommandée pour les polices Sans Serif, et Times New Roman
est la police de remplacement recommandée pour les polices Serif. Cependant, aucune de ces polices n'est disponible sur Android (Roboto
est la seule police système sur Android).
L'exemple ci-dessous utilise trois polices de remplacement pour assurer une couverture étendue sur les appareils: une police de remplacement qui cible les appareils Windows/Mac, une police de remplacement qui cible les appareils Android et une police de remplacement qui utilise une famille de polices générique.
body {
font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}
/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/
@font-face {
font-family: poppins-fallback;
src: local("Arial");
size-adjust: 60.85099821%;
ascent-override: 164.3358416%;
descent-override: 57.51754455%;
line-gap-override: 16.43358416%;
}
@font-face {
font-family: poppins-fallback-android;
src: local("Roboto");
size-adjust: 55.5193474%:
ascent-override: 180.1173909%;
descent-override: 63.04108683%;
line-gap-override: 18.01173909%;
}
Demande de commentaires
N'hésitez pas à nous contacter si vous avez des commentaires sur votre utilisation du remplacement des métriques de police et de size-adjust
.