Ist es möglich, Buchstabenabstand relativ zur Schriftgröße zu haben und richtig zu erben?

Question

Meine Frage ist im Grunde die gleiche wie diese, aber „line-height“ mit „Zeichenabstand“ ersetzen: When a relative line-height is inherited, it is not relative to the element's font-size. Why? And how do i make it relative?

Mein Anwendungsfall ist wie folgt:

body { 
    font-size: 18px; 
    letter-spacing: 1.2em; /* I would like letter-spacing to be relative to the font-size across the document, at least until I override it */ 
} 

.small { 
    font-size: 14px; 
    /* letter-spacing is 1.2em of 18px instead of 14px */ 
} 

Ich weiß, dass der Grund, Es funktioniert nicht, dass der berechnete Wert und nicht der angegebene Wert vererbt wird. Daher muss ich die letter-spacing jedes Mal neu eingeben, wenn sich die font-size ändert. Aber ich hoffe, dass es etwas Ähnliches gibt wie Unitless Werte in line-height arbeiten.

Klar, ich kann dies tun:

* { 
    letter-spacing: 1.2em; 
} 

Aber dann kann ich nicht auf die Kaskaden an einem Element zu stoppen, wie ich in der Lage wäre, mit line-height:

body { 
    font-size: 18px; 
    line-height: 1.5; 
} 

.normal-line-height { 
    line-height: normal; 
    /* all the descendants of this element will have a normal line-height */ 
} 

Ich meine, SURE Ich könnte das immer tun ...

Aber es ist immer noch nicht so elegant, wie ich möchte. Ich denke nicht, dass es eine elegante Lösung für dieses Problem gibt, aber ich frage, ob ich etwas verpasse.

Answer 1

CSS Variablen nicht weit unterstützt, aber würde der Trick:

body { 
 
    font-size: 18px; 
 
    --spacing: 1.2em; 
 
} 
 
.normal-letter-spacing { /* No need to select `.normal-letter-spacing *` */ 
 
    --spacing: normal; 
 
} 
 
body * { 
 
    letter-spacing: var(--spacing); 
 
} 
 
.small { 
 
    font-size: 14px; 
 
}

<div> 
 
    <p>Lorem ipsum</p> 
 
    <p class="small">Lorem ipsum</p> 
 
</div> 
 
<hr /> 
 
<div class="normal-letter-spacing"> 
 
    <p>Lorem ipsum</p> 
 
    <p class="small">Lorem ipsum</p> 
 
</div>

Sie arbeiten, weil Der Wert von custom property berechnet den angegebenen Wert:

berechneter Wert: angegebener Wert mit substituierten Variablen (siehe aber Prosa für „ungültige Variablen“)

daher, im Gegensatz zu, was mit letter-spacing geschieht, 1.2em ist nicht auf eine absolute Länge umgewandelt.

Dann können Sie allen Elementen den Wert --spacing als Wert von letter-spacing mitteilen. So wird 1.2em lokal in Bezug auf die Schriftgröße jedes Elements aufgelöst.

Im Gegensatz zu * { letter-spacing: 1.2em; } setzt diese Methode --spacing: 1.2em nur einmal in der body und lässt sie durch Vererbung propagieren. Wenn Sie diesen Wert in einem Teilbaum ändern möchten, müssen Sie daher nur --spacing im Stammverzeichnis überschreiben. Sie müssen nicht den gesamten Teilbaum auswählen.

Answer 2

Ich würde versuchen, REM über EM zu verwenden, um Ihre Beziehung mit einem Wert einzufrieren, der root (body) font-size wäre. Sie müssten sich später nicht um Änderungen der Schriftgröße kümmern.

Wenn Sie rems in mehr Orten verwenden möchten, würde ich empfehlen, alle Klassen an einem Ort zu organisieren, so dass Sie nicht viel Problem mit der Wartung haben würden. Es wäre auch eine gute Idee, es als eine Utility-Klasse zu halten wie

.txt-spacing-big { letter-spacing: 2rem; } 
.txt-spacing-medium { letter-spacing: 1rem; }