Dans Feuilles de style en cascade (CSS), La propriété de taille de police possède une grande importance. Il garantit que le texte se démarque et enrichit la feuille d'une hiérarchie visuelle. La hiérarchie aide à distinguer les titres et les sous-titres du texte normal. La propriété CSS-SIZE-SIZE utilise des unités de taille multiple comme Pixels, EM, largeur et pourcentage. De plus, il utilise également différents titres allant de

pour

.

Cet article discutera de la propriété de la taille de la police dans CSS. Nous apprendrons également comment utiliser explicitement le Propriétés prédéfinies et personnalisées de la forme de police Pour les éléments de texte. Alors, commençons!

Propriété de la taille d'une police CSS

Dans CSS, la propriété de taille de police est utilisée pour régler la taille d'un élément de texte, et sa valeur peut être «Prédéfinie» ou «taille personnalisée».

Dans les sections fournies ci-dessous, nous parlerons brièvement des valeurs CSS de taille de police prédéfinie et personnalisée dans la propriété de la taille d'une police.

Propriété de taille de police CSS en utilisant des valeurs prédéfinies

CSS fournit des valeurs prédéfinies pour définir la taille des polices des textes. La propriété de taille de police CSS est utilisée lorsque nous avons les informations liées à la taille physique de la sortie. De plus, les navigateurs ne permettent pas de modifier la taille du texte en raison de mauvaises raisons d'accessibilité.

Consultez la liste suivante des valeurs de propriété de taille de police prédéfinies CSS:

• Xx-petit
• X-petit
• Petit
• Moyen
• Grand
• Gigantesque
• Xx grand

Maintenant, jetons un coup d'œil à la syntaxe de fournir des valeurs prédéfinies à la propriété de taille de police:

Syntaxe de fournir des valeurs prédéfinies à la propriété de la taille d'une police

taille de police: moyen | grand | X-Large | xx-Large | xx-Small | x-Small | Small |;

Ici, nous devons ajouter une valeur spécifique pour le "taille de police" propriété.

Exemple: fournir des valeurs prédéfinies à la propriété de la taille d'une police

Dans cet exemple, nous spécifierons différentes valeurs de propriété de taille de police prédéfinie pour les éléments de paragraphe:

C'est du texte xx-grand.

C'est du texte X-Large.

C'est un grand texte.

C'est du texte moyen.

C'est un petit texte.

C'est du texte x-petit.

C'est du texte xx-petit.

Ouvrez le fichier HTML dans un navigateur après avoir ajouté le code spécifié. Ce faisant, le texte des paragraphes aura le format suivant:

Dans la section suivante, nous démontrerons l'utilisation de "coutume" Valeurs de propriétés de taille de police.

Propriété de taille de police CSS à l'aide de valeurs personnalisées

En fournissant le Valeurs personnalisées à la propriété de taille de police, vous pouvez définir le taille d'une police en fonction des éléments environnants, et cette propriété permet également à un utilisateur de modifier la taille de la police dans les navigateurs.

Dans CSS, la propriété de taille de police comprend les valeurs personnalisées suivantes:

• taille de police avec des pixels
• taille de police avec em
• taille de police avec des valeurs de pourcentage
• Taille de la police réactive

Propriété de taille de police CSS avec des pixels

Dans cette méthode, "Pixels" sont utilisés pour définir la valeur de la propriété de taille de police, offrant un contrôle total du contrôle de la taille du texte à l'utilisateur. C'est une valeur statique qui est totalement indépendante du SO.

Exemple: propriété de taille de police CSS avec des pixels

Maintenant, nous allons définir la taille de la police des éléments de paragraphe selon différentes valeurs de pixels telles que «50px», «40px» et «30px»:

Nous attribuons "50px" à ce texte.

Nous attribuons "40px" à ce texte.

Nous attribuons "30px" à ce texte.

Sortir

Comme vous pouvez le voir sur la sortie donnée, la taille du texte des paragraphes est définie en fonction des valeurs de pixels spécifiés.

Propriété de taille de police CSS avec EM

Le "Em" Valeurs du CSS propriété de la taille d'une police sont utilisés pour définir la taille du texte en fonction de la taille de la police des parents dans les navigateurs. De nombreux développeurs préfèrent «Em» sur «Pixels» car il offre un bon niveau de compatibilité pour les navigateurs.

Note: Dans un navigateur, la taille du texte par défaut est définie sur 16 pixels et un EM, ce qui signifie que 1 em = 16 pixels.

Jetez un coup d'œil à l'exemple donné ci-dessous:

Exemple: propriété de taille de police CSS avec EM

Dans cet exemple, nous définirons le "Em" Valeur pour les éléments de texte identiques à l'exemple précédent. Pour ce faire, nous diviserons le nombre de pixels avec "16" puis spécifiez la valeur résultante en tant que valeur de propriété de taille de police des éléments ajoutés:

C'est en tête 1

C'est en tête 2

C'est un paragraphe.

La sortie donnée signifie que nous avons réussi à appliquer la propriété de taille de police "Em" valeurs:

Propriété de la taille d'une police CSS avec des valeurs de pourcentage

Nous pouvons également définir la taille de la police par rapport à pourcentage, Et dans cette méthode, le pourcentage de police peut être augmenté à partir de 100%.

Exemple: propriété de taille de police CSS avec des valeurs de pourcentage

Maintenant, nous attribuerons différentes valeurs de pourcentage au "taille de police" Propriétés des éléments de paragraphe:

Cela a un texte de taille de police de 130%.

Cela a un texte de taille de police à 120%.

Cela a un texte de taille de police à 90%.

Cela a un texte de taille de police de 70%.

Sortir

Propriété de taille de police réactive CSS

Utilisation de CSS Propriété réactive de la taille de la police, Vous pouvez également définir la taille du texte en fonction de la largeur de la fenêtre de la fenêtre de votre navigateur. À cet effet, le "VW" La valeur unitaire est utilisée, alors que 1VW = 1% de la largeur de la fenêtre.

Note: Si l'utilisateur ne définit pas la taille de la police du texte, la taille par défaut d'un texte est égale à 16 px ou 1EM.

Exemple: propriété de taille de police réactive CSS

Exemple de texte réactif

Redimensionner la fenêtre du navigateur pour vérifier l'évolutivité du texte.

Sortir

Dans l'exemple donné ci-dessus, le texte peut être redimensionné en fonction du navigateur, et il suivra la taille de la fenêtre du navigateur.

Conclusion

Dans CSS, la propriété de taille de police est utilisée pour régler la taille d'un élément de texte, et sa valeur peut être «Prédéfini» ou «Custom». Plusieurs unités de mesure telles que Pixels, EM, fenêtre, largeur et pourcentage sont spécifiés comme les valeurs de la propriété de taille de police. Cette rédaction a discuté de la propriété CSS-SIZE et a démontré la méthode pour utiliser explicitement le Propriété prédéfinie et personnalisée de la taille de police Valeurs pour les éléments de texte.