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:
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
1
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
1
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
15
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.
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.
font-sizen'accepte pas la barre oblique. La propriété correcte estfont.Réponses:
Cela définit en fait deux propriétés et équivaut à:
Pour citer la documentation officielle :
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. Ilfont: 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:la source
fontpropriété abrégée comme vous pouvez le voir dans la définition officielle .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.
la source
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.