Améliorer la typographie Web avec la taille de la police CSS Ajuster

CSS font-size-adjust Attributs: un outil puissant pour améliorer la lisibilité de la composition des pages Web

L'attribut

font-size-adjust CSS permet aux développeurs de spécifier des tailles de police en fonction de la hauteur des lettres minuscules plutôt que de la hauteur des lettres majuscules, améliorant ainsi considérablement la lisibilité du texte Web, en particulier lors de l'utilisation de polices alternatives.

Cet article explorera en profondeur l'importance des attributs font-size-adjust et leur utilisation correcte dans les projets.

L'importance de

font-size-adjust La plupart des sites Web sont principalement composés de texte. Étant donné que le texte est crucial sur un site Web, il est particulièrement nécessaire de prêter une attention particulière aux polices utilisées. Le choix de la bonne police peut apporter une expérience de lecture agréable, sinon elle peut rendre le site Web difficile à lire. Après avoir déterminé la police, vous devez généralement sélectionner la taille de police appropriée.

Propriétés Définissez la taille de la police de toutes les séries de polices sur le site Web. Cependant, il est souvent choisi pour la famille des polices préférée. Le problème se pose lorsque la police préférée n'est pas disponible pour une raison quelconque, le navigateur utilise l'une des polices alternatives répertoriées dans le document CSS pour rendre le texte.

font-size par exemple, compte tenu des règles CSS suivantes:

Si le navigateur ne peut pas télécharger "Lato" à partir des polices Google, la prochaine police alternative, Verdana, sera utilisée à la place. Cependant, la valeur

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

est probablement choisie avec la considération de "Lato" plutôt que de Verdana.

font-size

Ratio d'aspect des polices Web

Pour les valeurs de taille de police constantes, la taille visuelle de la police et sa lisibilité peuvent varier considérablement. Cela est particulièrement vrai pour les textes tels que le latin qui sont sensibles à la casse. Dans ce cas, le rapport de la hauteur de la lettre minuscule à la hauteur de la lettre majuscule est un facteur important pour déterminer la lisibilité de la police. Ce rapport est souvent appelé le rapport d'aspect de la police.

Comme mentionné précédemment, une fois la valeur

définie, elle restera la même pour toutes les familles de polices. Cependant, si le rapport d'aspect de la police alternative est trop différent de la police préférée, elle peut affecter la lisibilité de la police alternative.

La propriété font-size

est très importante dans ce cas car elle vous permet de définir la hauteur X de toutes les polices sur la même valeur, améliorant ainsi sa lisibilité.

font-size-adjust

Sélectionnez la valeur

appropriée font-size-adjust Maintenant que vous comprenez l'importance d'utiliser l'attribut

, apprenez à l'utiliser sur votre site Web. Cette propriété a la syntaxe suivante:

font-size-adjust La valeur initiale de

<code class="language-css">font-size-adjust: none | <number></number></code>

est

. La valeur font-size-adjust signifie que la valeur none de différentes séries de polices ne sera pas ajustée. none

Vous pouvez également définir la valeur de l'attribut font-size-adjust à un nombre. Ce numéro est utilisé pour calculer la hauteur X de toutes les polices sur une page Web à la même valeur. La hauteur x est égale au nombre donné multiplié par la taille de la police. Cela peut améliorer considérablement la lisibilité des polices de petite taille. Voici un exemple de la façon d'utiliser l'attribut font-size-adjust:

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

La hauteur x de toutes les polices sera désormais de 20px * 0,6 = 12px. La taille réelle d'une police donnée peut désormais être modifiée pour garantir que la hauteur X reste à 12px à tout moment. La nouvelle taille de police ajustée pour une police donnée peut être calculée en utilisant la formule suivante:

c = (a / a ') s.

Ici, C est la taille de police ajustée à utiliser, S est la valeur de taille de police spécifiée, a est le rapport d'aspect spécifié par l'attribut font-size-adjust, et a 'est le rapport d'aspect de la police qui doit être ajusté.

Vous ne pouvez pas définir font-size-adjust sur une valeur négative. Une valeur de 0 entraînera une hauteur du texte, en d'autres termes, le texte sera en fait caché. Dans les navigateurs plus anciens tels que Firefox 40, une valeur de 0 équivaut à régler font-size-adjust à none.

Dans la plupart des cas, les développeurs essaient généralement plusieurs valeurs de taille de police pour voir quelle valeur convient le mieux pour une police donnée. Cela signifie que, idéalement, ils veulent que la hauteur X de toutes les options de police soit égale à la hauteur X de leur police préférée. En d'autres termes, la valeur la plus appropriée pour l'attribut font-size-adjust est le rapport d'aspect de la police préférée.

Comment déterminer le rapport d'aspect d'une police

Pour déterminer le rapport d'aspect correct d'une police, vous pouvez compter sur le fait que sa taille de police redimensionnée devrait être la même que la taille de police d'origine que vous avez spécifiée. Cela signifie que dans l'équation précédente, A devrait être égal A '.

La première étape du calcul du rapport d'aspect consiste à créer deux éléments. Les deux éléments contiendront une seule lettre et sa bordure environnante (les deux lettres doivent être les mêmes car nous devons comparer entre ces deux éléments). De plus, les valeurs d'attribut font-size pour les deux éléments sont les mêmes, mais une seule d'entre elles utilisera également l'attribut font-size-adjust. Lorsque la valeur de font-size-adjust est égale au rapport d'aspect d'une police donnée, la taille des deux lettres dans chaque élément sera la même.

Utiliser sur le site Web font-size-adjust

Prise en charge du navigateur: Actuellement, seul Firefox prend en charge font-size-adjust par défaut. En commençant par les versions 43 et 30, Chrome et Opera prennent en charge cette propriété après l'indicateur de plate-forme Web expérimentale (activé dans Chrome: // Flags). Edge et Safari ne prennent pas du tout l'attribut font-size-adjust.

Si vous décidez d'utiliser cette propriété, la prise en charge inférieure du navigateur ne doit pas du tout être un problème. Cette propriété est conçue avec une compatibilité arriérée à l'esprit. Les navigateurs qui ne prennent pas en charge cette propriété affichent normalement du texte, tandis que les navigateurs qui prennent en charge cette propriété ajusteront la taille de la police en fonction de la valeur de la propriété font-size-adjust.

Conclusion

Après avoir lu ce tutoriel, vous connaissez maintenant le rôle des attributs font-size-adjust, leur importance et comment calculer les ratios d'aspect des différentes polices.

Parce que font-size-adjust peut être rétrogradé gracieusement dans les navigateurs plus âgés, vous pouvez commencer à l'utiliser immédiatement pour améliorer la lisibilité du texte dans votre site Web de production.

(L'image à la fin de l'article est la même que le début de l'article)

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!