Maison > interface Web > tutoriel CSS > Que signifie la barre oblique dans le raccourci des polices CSS ?

Que signifie la barre oblique dans le raccourci des polices CSS ?

Barbara Streisand
Libérer: 2024-11-12 01:39:02
original
366 Les gens l'ont consulté

What Does the Slash Mean in CSS Font Shorthand?

Comprendre la barre oblique dans le raccourci de police CSS

En CSS, la propriété font fournit un moyen pratique de définir plusieurs propriétés liées aux polices dans une seule déclaration. Cependant, l'utilisation d'une barre oblique dans cette propriété peut prêter à confusion.

Que signifie la barre oblique ?

La barre oblique dans la propriété CSS suivante :

font: 100%/120%;
Copier après la connexion

définit en fait deux propriétés distinctes, équivalentes à :

font-size: 100%;
line-height: 120%;
Copier après la connexion

Selon la documentation CSS officielle, cette syntaxe imite le raccourci typographique traditionnel pour spécifiant les tailles de caractères comme "x pt sur y pt", où "x" représente la taille du glyphe et "y" la hauteur de la ligne.

Tradition de composition

Dans le monde de la composition imprimée, il était Il est courant de spécifier des polices de caractères en utilisant cette notation "x sur y", et CSS hérite de ce concept. Le caractère barre oblique divise les valeurs de taille de police et de hauteur de ligne, tout comme dans la version imprimée.

Exigences de syntaxe

Cependant, il est important de noter que cette notation abrégée nécessite de spécifier à la fois la police famille et taille. L'exemple fourni dans votre question, font: 100%/120%;, n'est pas valide et sera ignoré par les navigateurs. Pour le rendre valide, vous devez ajouter une famille de polices, telle que :

font: 100%/120% serif;
Copier après la connexion

En comprenant la signification de la barre oblique dans la propriété de police CSS, vous pouvez contrôler efficacement la taille et l'espacement des lignes de votre texte dans conception de sites Web.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal