Bezieht sich der Pixelwert einer Schriftgröße auf die Höhe der Schrift oder auf die Breite der Schrift?
CSS:
.sixteen {
font-size: 16px;
}
HTML:
<span class="sixteen">a</span>
Wird das “a” 16 Pixel hoch oder 16 Pixel breit sein, oder ist das wie eine maximale Breite/Höhe auf beiden, sodass das gesamte Zeichen in ein 16-Pixel-Feld passt?
Alle Unterlagen, die ich dazu gesehen habe, waren in dieser Angelegenheit mehrdeutig.
Die Höhe – insbesondere von der Oberkante der Oberlängen (z. B. „h“ oder „l“ (el)) bis zur Unterkante der Unterlängen (z. B. „g“ oder „y“). Siehe den interessanten Artikel über Type Anatomy unter http://en.wikipedia.org/wiki/Typeface_anatomy.
Das font-size -Eigenschaft gibt die Größe der Schriftart an, unabhängig von der verwendeten Einheit. Die Größe einer Schriftart kann als Höhe der Schriftart charakterisiert werden, aber selbst dies ist nur eine lockere und pragmatische Beschreibung; Zeichen können über und unter die durch die Schriftgröße definierten Ebenen hinausragen. Die Größe ist eine mehr oder weniger abstrakte Eigenschaft, und es sollte nicht erwartet werden, dass sie der Höhe (noch weniger der Breite) irgendeines Zeichens entspricht.
Insbesondere wäre es falsch, eine Schrift zu entwerfen, bei der der Buchstabe „a“ die volle Höhe der Schrift einnimmt. Die Höhe von „a“ beträgt normalerweise etwa die Hälfte der Schriftgröße, aber dies variiert sicherlich je nach Schriftart (versuchen Sie es mit „a“ in Times New Roman und in Verdana mit derselben Schriftgröße).
Das finde ich überhaupt nicht richtig. Die Ober- und Unterlängen sind in der Schriftgröße enthalten – es ist irreführend zu sagen, dass Zeichen über und unter die Schriftgröße hinausragen. Denken Sie vielleicht an x-Höhe? x-Höhe ist die Höhe von der Grundlinie bis zum oberen Rand von nicht runden Zeichen wie ‘x’. Ober- und Unterlängen gehen über die x-Höhe einer Schriftart hinaus, aber nur wenige Leute würden die x-Höhe mit der Schriftgröße gleichsetzen. Auch die Schriftgröße ist in den meisten Kreisen nicht locker definiert (einschließlich HTML-Rendering).
– DMac
27. April 2012 um 19:41 Uhr
Ich habe die Schriftgröße nicht mit der x-Höhe verwechselt. Der Abstand vom oberen Ende der Oberlänge zum unteren Ende der Unterlänge ist nur eine grobe Charakterisierung, keine Spezifikation. Sehr oft verwenden Schriftarten etwas weniger Höhe und manchmal mehr. Demo-Code: <p style="font: 42pt Verdana; line-height: 1em; background: yellow; border: solid red 1px;">QÅgjþÊ</p>. Die CSS 2.1-Spezifikation sagt: „Die Schriftgröße entspricht dem Em-Quadrat, einem Konzept, das in der Typografie verwendet wird. Beachten Sie, dass bestimmte Glyphen außerhalb ihrer Em-Quadrate bluten können.“ w3.org/TR/CSS2/fonts.html#font-size-props
– Jukka K. Korpela
27. April 2012 um 20:20 Uhr
Entsprechend diesen Artikel von Vincent De Oliveiradas font-size hat eigentlich nichts damit zu tun tatsächlich Höhe der Zeichen. Es ist nicht einmal die Höhe des Inline-Elements, das Text enthält.
Natürlich ist ein größerer Wert der font-size -Eigenschaft führt zu einem größeren Text. Der Pixelwert wird jedoch nicht direkt in die tatsächliche Textgröße übersetzt.
Allerdings ist der Pixelwert von font-size legt die Größe von fest 1em zur Einstellung von Rändern, Auffüllungen usw.
