Das Problem ist hier nicht die Zeilenhöhe, sondern die vertikale Platzierung von Glyphen, insbesondere die Position der Textgrundlinie. Das hat der Schriftdesigner entschieden; Der Designer zeichnet Glyphen und platziert sie in das em-Quadrat, das konzeptionelle Gerät, dessen Höhe der Schrifthöhe entspricht (oder definiert ist). Insbesondere entscheidet der Designer, wie viel Platz sich einerseits unter der Grundlinie und andererseits über der Höhe von Großbuchstaben befindet. Typischerweise sind diese Räume gleich oder fast gleich, müssen aber nicht sein. Wenn sie sich wesentlich unterscheiden, ist die beabsichtigte Verwendung der Schriftart wahrscheinlich speziell und beinhaltet keine Verwendung wie die im Bild gezeigte. Dies legt nahe, dass die Schriftartwahl neu überdacht werden sollte, aber nehmen wir an, dass es behoben ist.
Es gibt mehrere Möglichkeiten, mit dem Problem umzugehen. Wenn unter den Buchstaben zu viel Platz ist, verringert das Reduzieren von line-height es, aber es wirkt sich auch auf den Raum darüber aus. Die obere Polsterung hilft in gewissem Sinne, erhöht jedoch die Gesamthöhe des Elements. Sie können auch mit vertical-align spielen, aber es beeinflusst die Höhe der Zeilenfelder.
Wahrscheinlich ist der einfachste Ansatz relative Positionierung zu verwenden, vorausgesetzt, dass das Problem mit einem einlinigen Text befasst ist. Bei der relativen Positionierung wird der Inhalt nur auf eine bestimmte Weise verschoben, ohne dass das Layout dadurch beeinträchtigt wird. Sie würden hierfür einen Wrapper benötigen, d. H. Ein Element, das den Text enthält, so dass Sie nur den Text und nicht den Hintergrund verschieben können.
Die folgende Demo verwendet eine Google-Schrift Candal, die ein ähnliches Problem hat, aber in einer anderen Richtung: die Basislinie ist zu niedrig. Modifikationen dieses Ansatzes, um das ursprüngliche Problem zu lösen, sollten offensichtlich sein, aber der genaue Betrag der Verschiebung muss empirisch bestimmt werden (oder aus Informationen, die aus der Schriftartdatei unter Verwendung eines Schriftart-Inspektors extrahiert werden). Natürlich sollte die Einheit em hier verwendet werden, auch wenn Sie die Schriftgröße in Pixel oder Punkten festlegen (so dass der Code nicht geändert werden muss, wenn die Schriftgröße eines Tages geändert wird).
<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>
Hierbei handelt es sich nicht um Linienhöhe, sondern um vertikale Platzierung von Glyphen. –
Eine andere plausible Lösung? Abgesehen von der akzeptierten Lösung? Ich möchte die Schriftart nicht manuell bearbeiten –