Ajustement de la taille du CSS pour @font-face

Lors du chargement d'une police Web, vous pouvez désormais ajuster son échelle afin de normaliser les tailles de police du document et d'éviter le décalage de mise en page lors du passage d'une police à une autre

Adam Argyle

Tenez compte des points suivants démonstration où font-size est un 64px cohérent et où la seule différence entre chacun de ces en-têtes est font-family. Les exemples à gauche n'ont pas été ajustés et ont une taille finale incohérente. Les exemples à droite utilisent size-adjust pour s'assurer que 64px a une taille finale cohérente.

Dans cet exemple, les outils de débogage de la mise en page de grille CSS des outils pour les développeurs Chrome sont utilisés pour afficher les hauteurs.

Cet article explore un nouveau descripteur de police CSS appelé size-adjust. Il présente également quelques façons de corriger et de normaliser les tailles de police pour une expérience utilisateur plus fluide, des systèmes de conception cohérents et une mise en page de page plus prévisible. Un cas d'utilisation important consiste à optimiser le rendu des polices Web pour éviter le déplacement cumulatif de la mise en page (CLS).

Navigateurs pris en charge

  • Chrome: 92
  • Edge : 92.
  • Firefox: 92
  • Safari: 17.

Source

Voici une démonstration interactive de l'espace problème. Essayez de changer la police de caractères à l'aide du menu déroulant et observez:

  1. Différences de hauteur dans les résultats.
  2. Contenu visuellement choquant.
  3. déplacer des zones cibles interactives (la liste déroulante se déplace de façon aléatoire).

Mettre à l'échelle les polices avec size-adjust

Introduction à la syntaxe:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Crée une police personnalisée nommée Adjusted Typeface.
  2. Utilise size-adjust pour agrandir chaque glyphe à 150 % de sa taille par défaut.
  3. N'affecte que la police importée.

Utilisez la police de caractères personnalisée ci-dessus comme ceci:

h1 {
  font-family: "Adjusted Typeface";
}

Atténuer le CLS avec un échange de polices fluide

Dans le GIF suivant, regardez les exemples à gauche et découvrez comment lorsque la police est modifiée. Il ne s'agit que d'un petit exemple avec un seul élément de titre, et le problème est très visible.

La mise en page de l'exemple de gauche est décalée, celle de l'exemple de droite ne l'est pas.

Pour améliorer le rendu des polices, la technique de remplacement de police est très efficace. Afficher un élément à chargement rapide pour afficher le contenu en premier, puis de le remplacer par une police Web le chargement de la police Web est terminé. Vous bénéficiez ainsi du meilleur des deux mondes : le contenu est visible dès que possible et vous obtenez une page bien stylisée sans sacrifier le temps de vos utilisateurs au contenu. Le problème, cependant, est que parfois, Lors du chargement de la police Web, toute la page est décalée, car elle présente un format de taille légèrement différente de la boîte.

Plus le contenu est important, plus la mise en page est décalée lors des changements de police

En plaçant size-adjust dans la règle @font-face, vous définissez un ajustement global des glyphes pour la police. Si vous le faites correctement, le changement visuel sera minimal et le remplacement fluide. Pour un remplacement facile, ajustez la main ou essayez ceci ajustement-taille calculatrice par Malte Ubl.

Choisissez une police Web Google pour obtenir un extrait @font-face préajusté.

Au début de cet article, la résolution du problème de taille de police a été effectuée par un essai et . size-adjust a été placé dans le code source jusqu'à ce que le même en-tête Cookie et Arial ont généré le même 64px que Press Start 2P de façon naturelle. J'ai aligné deux polices sur une taille de police cible.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrer les polices

En tant qu'auteur, vous déterminez la ou les cibles de calibrage pour normaliser l'échelle de la police. Vous pouvez normaliser sur Times, Arial ou une police système, puis ajuster les polices personnalisées en conséquence. Vous pouvez également ajuster les polices locales pour qu'elles correspondent à celles que vous téléchargez.

Stratégies de calibrage de size-adjust:

  1. Cible distante :
    ajuste les polices locales en fonction des polices téléchargées.
  2. Cible locale :
    ajuste les polices téléchargées en fonction des polices cibles locales.

Exemple 1 : Cible distante

Prenons l'extrait suivant, qui ajuste une police disponible localement pour qu'elle corresponde à une police personnalisée de source distante. Une police personnalisée distante est la cible de la calibration, par exemple une police de marque :

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

Dans cet exemple, la police locale Arial procède à un ajustement en prévision du chargement d'une police personnalisée, un échange simple et fluide.

Cette stratégie présente l'avantage d'offrir aux concepteurs et aux développeurs les mêmes pour le dimensionnement et la typographie. La marque est la cible de calibration. C'est de bonnes nouvelles pour les systèmes de conception.

La calculatrice de Malte fonctionne également sur la base d'une typographie de marque comme cible. Choisissez une police Google Fonts, et le système calculera comment ajuster la police avec lui. Voici un exemple de CSS Roboto de la calculatrice, où Arial est chargé et nommé "Roboto-fallback" :

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Pour créer un ajustement entièrement multiplate-forme, consultez l'exemple suivant, qui fournit deux polices de remplacement locales ajustées en prévision d'une police de marque.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Exemple 2: Cible locale

Prenons l'extrait de code suivant, qui ajuste une police personnalisée de la marque pour qu'elle corresponde à Arial :

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Cette stratégie présente l'avantage de s'afficher sans aucun ajustement, puis d'ajuster les polices entrantes en conséquence.

Réglage plus précis avec ascent-override, descent-override et line-gap-override

Si la mise à l'échelle générique des glyphes n'est pas suffisante pour la conception ou le chargement des stratégies d'enchères intelligentes, voici quelques options d'optimisation size-adjust La ascent-override, descent-override, et line-gap-override sont actuellement disponibles dans Chromium 87+ et Firefox 89+.

ciseaux au-dessus et souffler les forçages de mots, en montrant les zones auxquelles les éléments géographiques peuvent être rognés

ascent-override

Navigateurs pris en charge

  • Chrome : 87
  • Edge : 87.
  • Firefox: 89
  • Safari: non compatible.

Source

Le descripteur ascent-override définit la hauteur au-dessus de la ligne de base d'une police.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Le titre rouge (non ajusté) comporte un espace au-dessus des lettres majuscules A et O, tandis que le titre bleu a été ajusté pour que sa hauteur de majuscule s'adapte parfaitement à la zone de délimitation globale.

descent-override

Navigateurs pris en charge

  • Chrome: 87
  • Edge: 87
  • Firefox: 89
  • Safari : non compatible.

Source

Le descripteur descent-override définit la hauteur sous la ligne de base de la police.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Le titre en rouge (non ajusté) contient un espace en dessous de D et O références, tandis que la couleur bleue le titre a été ajusté de sorte que les lettres soient bien alignées sur la ligne de base.

line-gap-override

Navigateurs pris en charge

  • Chrome : 87
  • Edge : 87.
  • Firefox: 89
  • Safari : non compatible.

Source

Le descripteur line-gap-override définit la métrique d'écart de ligne pour la police. Il s'agit de la police recommandée pour l'interligne ou le début externe.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Le titre rouge (non ajusté) ne comporte pas de line-gap-override, il est essentiellement à 0%, tandis que le titre bleu a été ajusté à 50 %, créant ainsi de l'espace au-dessus et en dessous des lettres.

Synthèse

Chacun de ces remplacements offre un moyen supplémentaire d'éliminer les éléments superflus le cadre de délimitation du texte sécurisé. Vous pouvez adapter la zone de texte pour une présentation précise.

Conclusion

La fonctionnalité CSS size-adjust @font-face est un moyen intéressant de personnaliser la zone de délimitation du texte de vos mises en page Web afin d'améliorer l'expérience de changement de police et d'éviter ainsi un décalage de mise en page pour vos utilisateurs. Pour en savoir plus, consultez ces ressources:

Photo par Kristian Strand sur Unsplash