Maison > Article > interface Web > Comment ajuster automatiquement la taille de la police en utilisant CSS ?

Comment ajuster automatiquement la taille de la police en utilisant CSS ?

PHPzavant: 2023-09-15 22:13:021506parcourir

Nous pouvons utiliser la propriété "font-size-adjust" fournie par CSS pour ajuster la taille de la police du texte. La propriété "font-size-adjust" nous permet de nous ajuster à une taille de police universelle quelles que soient les différentes familles de polices utilisées dans le document (le cas échéant). De cette façon, nous pouvons ajuster la taille de police des lettres minuscules utilisées dans le document par rapport à la taille de police des lettres majuscules dans le document.

Grammaire

font-size-adjust: number | initial | none | inherit | revert | revert-layer | unset

"font-size-adjust" peut prendre plusieurs des valeurs listées ci-dessus. Ces valeurs nous aident à nous adapter à une taille de police universelle, quelle que soit la famille de polices utilisée.

REMARQUE - Avant de continuer avec l'exemple, assurez-vous que vous utilisez Firefox car la propriété "font-size-adjust" n'est actuellement disponible que dans Firefox en tant que navigateur principal.

Exemple 1

Dans cet exemple, nous ajustons la taille de police des lettres minuscules à la moitié de la taille de police par défaut des différentes familles de polices utilisées.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
      .a {
         font-family: 'Times New Roman', Times, serif;
      }
      .b {
         font-family: Helvetica;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>

Exemple 2

Dans cet exemple, nous ajustons la taille de police des lettres minuscules à la moitié de la taille de police par défaut de la famille de polices par défaut utilisée.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>

Conclusion

Dans cet article, nous avons appris à travers deux exemples différents ce qu'est la propriété « font-size-adjust » et l'avons utilisée pour ajuster automatiquement la taille de la police du texte dans un document à l'aide de CSS. Dans le premier exemple, nous ajustons la taille de police des lettres minuscules à la moitié de la taille de police par défaut de la police personnalisée, et dans le deuxième exemple, nous ajustons la taille de police des lettres minuscules à la moitié de la taille de police par défaut. de la police par défaut.

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!

firefox css

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment styliser la couleur, la taille et l'ombre des icônes à l'aide de CSSArticle suivant：Comment styliser la couleur, la taille et l'ombre des icônes à l'aide de CSS

Articles Liés

Voir plus