Maison >interface Web >tutoriel CSS >Que signifie la barre oblique (/) dans la notation abrégée des polices CSS ?

Que signifie la barre oblique (/) dans la notation abrégée des polices CSS ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-10 20:49:13918parcourir

What Does the Forward Slash (/) Mean in CSS Font Shorthand Notation?

Déchiffrer le symbolisme abrégé des polices : la signification de la barre oblique

Dans le domaine du CSS, l'énigmatique notation abrégée des polices soulève souvent des questions . L’une de ces énigmes concerne le rôle de la barre oblique (/). Cet article approfondira la sémantique derrière ce séparateur énigmatique.

Comprendre la fonction de la barre oblique

Considérez la déclaration CSS suivante :

font: 12px/18px ...

Au sein de cette ligne, la partie 12px/18px a une signification importante. Il élucide les deux aspects suivants de la typographie :

  • Taille de la police (12px) :Cette valeur dicte la taille de la police utilisée pour restituer le texte.
  • Hauteur de la ligne (18px) : Cette valeur spécifie l'espacement vertical entre les lignes de texte, garantissant la lisibilité et esthétique.

Lier la théorie à la syntaxe

La curieuse syntaxe du raccourci de police rend hommage aux conventions typographiques. Dans la conception imprimée, la taille des caractères est exprimée en points, tandis que la hauteur de la ligne est généralement indiquée comme un multiple de la taille des caractères. Par exemple, une hauteur de ligne de 18 px implique que le texte sera rendu en utilisant une taille de police de 12 px et un espacement vertical supplémentaire de 50 % (18px = 12px, 50 % de 12px).

Traduire le raccourci en propriétés individuelles

En pratique, la déclaration abrégée de la police se traduit de manière transparente par une déclaration plus longue et plus détaillée. équivalent :

font-size: 12px;
line-height: 18px;

Cela démontre que la notation abrégée offre simplement une méthode compacte pour définir plusieurs propriétés de police simultanément.

Hauteurs de ligne relatives

Il est important de noter que la hauteur de ligne peut également être exprimée sous forme de valeur relative, telle qu'un pourcentage ou une unité em. Dans de tels scénarios, le calcul est effectué par rapport à la taille de la police. Par exemple, une hauteur de ligne de 150 % signifie que l'espacement vertical entre les lignes sera 1,5 fois la taille de la police (18px = 12px * 150%).

Référence aux normes

Pour plus d'informations sur les spécifications régissant la propriété font en CSS, reportez-vous au suivant :

  • [Référence des propriétés de police W3C CSS2.1](https://www.w3.org/TR/CSS21/fonts.html)
  • [Module de polices W3C CSS3 Référence de propriété de police](https://www.w3.org/TR/css3-fonts/#font-property)

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!

Déclaration:
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