Wie mit line-height zu bewältigen und dabei ein Pixel perfektes Designs Codierung

Question

Hier ist ein Screenshot von dem Beispiel Design I aus:

Es gibt einen 10px Raum zwischen dem Boden der Buchstaben und der rote Linie. Ich versuche, dies mit dem folgenden Code zu replizieren:

font: normal 40px arial; 
border-bottom: 3px solid red; 
padding-bottom: 10px; 

Technisch sollte dieser Code mir genau geben, was ich will. Aber das tut es nicht. Hier ist ein Screenshot davon in Aktion in Chrome:

Wegen der Zeilenhöhe gibt es mehr Platz zwischen dem Text und der Grenze. Hier ist ein untersuchter Screenshot auf Chrome:

Wenn ich meine Zeit in Anspruch nehmen und den Raum unter den Buchstaben messen, die durch Zeilenhöhe verursacht werden ist, kann ich sehen, es ist ein 9px leeren Bereich ist. Also, um 10px Abstand zwischen dem Text und dem Rand Ich brauche meinen Code zu ändern:

padding-bottom: 1px; 

Eine Lösung dieses Problems könnte eine Eigenschaft line-height mit dem Betrag des Textes der genaue Höhe bei der Gestaltung das Hinzufügen Datei. Aber dann wird es versauen, wenn der Text mehrere Zeilen enthält.

Was ist der beste Ansatz hier, um die Pixel-perfekte Design-Konvertierung zu erreichen?

Answer 1

In HTML gibt es keine Möglichkeit, den Abstand zwischen der Textbasislinie und dem Rahmen anzugeben. Um dies zu verstehen, sehen Sie dieses Bild:

Die Höhe des HTML-Text beinhaltet immer sowohl den ascender Bereich und den Abseilgerät Bereich, auch in Fällen, wenn es keine Buchstaben mit einem Abseilgerät oder einem ascender sind. Daher ist der tatsächliche Abstand zwischen dem unteren Rand des Textes und dem Rand in Ihrem Beispiel nicht 10px.

Um den richtigen Abstand vom unteren Ende des Textes in Pixeln zu erhalten, ändern Sie den Text so, dass er einen Buchstaben mit einer Unterlänge enthält (zB Hellp, Worly ") und messen Sie den Abstand zwischen den Unterseiten der Unterlängen und der roten Linie.

Alternativ, wenn Sie ein Bild wieder versuchen, und nicht den Text ändern, misst das Verhältnis text height/point size des verwendeten Schriftart ein Zeichenprogramm (zB Inkscape) verwendet, berechnen dann den Abstand wie folgt:

css distance = baseline distance - (point size * (1 - ratio))

Answer 2

Der Grundabstand unter a nd über einem Zeichen (Glyphe) wird vom Font Designer definiert. Beispielsweise gibt es in Arial Platz unterhalb und oberhalb eines gewöhnlichen Großbuchstabens wie "H", selbst wenn Text fest eingestellt ist (line-height: 1). Wenn line-height größer als 1 ist, gibt es zusätzlichen Abstand unter und über. Sogar für line-height kleiner als 1 (d. H. Mit "negativem Vorlauf") kann ein gewisser Abstand vorhanden sein. Und jedes von Ihnen festgelegte Padding trägt dazu bei.

Wenn Sie den genauen Text kennen, der im Inhalt erscheint (und es wird sich nie ändern) und wenn Sie sich darauf verlassen, dass die bestimmte Schriftart immer verfügbar ist (was für die Schriftart Arial sehr wahrscheinlich, aber nicht sicher ist), Dann können Sie einige Experimente ausführen und iterieren, bis Sie einen geeigneten Wert gefunden haben. In diesem speziellen Fall würde line-height: 0.82 den Abstand über gewöhnlichen Großbuchstaben A-Z entfernen (aber alle diakritischen Zeichen auf ihnen, wie in É oder Å, wird abgeschnitten) und würde den Abstand unter der Basislinie reduzieren (aber wenn Buchstaben Unterlängen haben wie in "j" oder "þ" werden sie dann teilweise abgeschnitten.

Die Pixelperfektheit kann immer noch durch Unterschiede beim Font-Rendering (wie Anti-Aliasing oder nicht) in Browsern gestört werden.