Taille de la police en CSS avec barre oblique

133

Que signifie la barre oblique ici:

font: 100%/120%;

html css size

— Alex
source

font-sizen'accepte pas la barre oblique. La propriété correcte est font.

— BoltClock

Que penses-tu de ceux-ci? background: "rgba (0, 0, 0, 0) aucun répéter défilement 0% 0% / auto padding-box border-box"

— jerinho.com

196

Cela définit en fait deux propriétés et équivaut à:

font-size: 100%;
line-height: 120%;

Pour citer la documentation officielle :

La syntaxe de cette propriété est basée sur une notation abrégée typographique traditionnelle pour définir plusieurs propriétés liées aux polices.

Comme David M l'a dit dans les commentaires, cela reflète la tradition de composition de la spécification des tailles de police comme « x pt sur y pt» pour désigner la taille du glyphe sur la hauteur de ligne.

Mais l'exemple de votre question est en fait faux et serait ignoré par le navigateur: vous ne pouvez combiner ces deux propriétés que dans la fontnotation abrégée, et vous devez au moins spécifier à la fois la taille de la police et la famille. Il font: 100%/120%;ne suffit donc pas d' écrire simplement ; vous pouvez ajouter un nom de famille générique pour le rendre valide, par exemple:

font: 100%/120% serif;

— Konrad Rudolph
source

C'est pour refléter l'ancienne syntaxe de composition, où vous auriez défini la police comme, par exemple, "10pt sur 12pt" ou "10pt / 12pt".

— David M

J'utilise en fait un peu. Le designer avec lequel je travaille se réfère toujours au dimensionnement comme, par exemple, "14 sur 22". Je l'ai mis par accident un jour et j'ai été surpris / satisfait quand cela fonctionnait.

— Dylan Lukes

un quickie: ce format ne nécessite-t-il pas non plus la spécification de la famille de polices? Mes navigateurs ignorent cette propriété: font: 12px / 16px; mais en acceptant ceci: font: 12px / 16px sans-serif; Ce comportement est également documenté ici

— kumarharsh

@Harsh Oui, une famille (avec une taille) est minimalement requise pour la fontpropriété abrégée comme vous pouvez le voir dans la définition officielle .

— Konrad Rudolph

Merci pour la clarification. Vous pouvez peut-être mettre à jour la réponse (ou la question) car elle est légèrement trompeuse dans la mesure où un lecteur occasionnel peut supposer que seule une déclaration SIZE / LINE_HEIGHT fonctionnerait.

— kumarharsh

Konrad a obtenu celui-ci, mais il existe de nombreuses propriétés de raccourci CSS comme celle-ci que vous pouvez utiliser pour raccourcir vos feuilles de style. Certains d'entre eux ont l'air un peu énigmatiques si vous ne les connaissez pas.

— Bill le lézard
source

Cependant, la plupart des raccourcis adressent les propriétés de style liées (par exemple border-*). David a donné une bonne explication dans les commentaires de ma réponse. Quant aux shorthands étant cryptiques: certainement vrai, mais tellement utile et assez facile à apprendre.

— Konrad Rudolph le