Wie kann ich einen oberen Rand an die Glyphen einer Schriftart anpassen?

9

Ich brauche in einem Projekt Regeln für die Basislinie, die x-Höhe und die Kappenhöhe mehrerer Schriftproben. Ich habe Grundlinie und x-Höhe beachtet, aber habe Probleme, eine allgemeine CSS Regel zu erhalten, die einen Rand an der Kappenhöhe irgendeiner Schriftart zeichnet, auf die ich die Regel anwende. Ich habe mit der Zeilenhöhe herumgespielt, aber der Abstand zwischen den Glyphen einer Schriftart und dem oberen Rand der Layoutbox unterscheidet sich von Schriftart zu Schriftart, so dass das einmalige Einstellen nicht für jede Schriftart funktioniert.

Dieses Code-Pen-Beispiel veranschaulicht das Problem: Ссылка

    
Dr. Spatula 11.03.2013, 14:47
quelle

3 Antworten

1

Sie wenden jetzt die Zeilenhöhe auf das p an. Wenn Sie es dort entfernen und die Zeilenhöhe auf den span.text anwenden und auf einen Wert von 1,55ex setzen, wird es ordnungsgemäß angezeigt.

Dein CSS wird also sein:

%Vor%     
veelen 22.05.2013 09:29
quelle
0

Es ist sehr schmutzig, aber haben Sie versucht, ein Bild mit einem Pixel als wiederholenden Hintergrund zu verwenden, dann können Sie seine Position relativ zur Schrift festlegen?

    
pixelator 19.03.2013 12:09
quelle
0

vielleicht kann ich helfen. Ich habe dir eine kleine Geige gemacht, um sie anzusehen. ( Ссылка )

Ich befürchte jedoch, dass Sie bei dieser Lösung die Spanne mit der rosa Linie für jede Schriftgröße und jede Schriftart neu positionieren müssen. Aber im Wesentlichen werden Sie einen Bereich über Ihren Text positionieren, indem Sie folgenden Code verwenden:

%Vor%

Vergessen Sie nicht, Ihren Container relativ zu positionieren

    
Dries 10.04.2013 19:32
quelle

Tags und Links