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
Libérer: 2024-12-10 20:49:13
original
862 Les gens l'ont consulté

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 ...
Copier après la connexion

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;
Copier après la connexion

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!

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