Wie kann ich eine obere Grenze eng an die Glyphen einer Schriftart anpassen?

Question

Ich brauche in einem Projekt, um Regeln auf der Basislinie, x-Höhe und Cap-Höhe von mehreren Font-Samples zu zeigen. 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.

Dieser Kodex Pen Beispiel veranschaulicht das Problem: http://codepen.io/DrSpatula/pen/BAgqG

Answer 1

Es ist sehr schmutzig, aber haben Sie versucht, eine ein Pixel GIF als Hintergrund wiederholen dann setzen Sie können es Position in Bezug auf die Schrift ist?

Answer 2

vielleicht kann ich helfen. Ich habe eine kleine Geige für dich zu sehen gemacht. (http://jsfiddle.net/dgxJh/1/)

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

span{ 
    height: 1px; 
    width: 100%; 
    background: pink;  
    display: block; 
    position: absolute; 
    top: 0.6em; 
} 

vergessen Sie nicht Ihre Behälter relativ

Answer 3

Sie bewerben sich auf die p die line-height jetzt zu positionieren. Wenn Sie es dort entfernen und die Zeilenhöhe auf "span.text" anwenden und auf einen Wert von 1,55ex festlegen, wird es ordnungsgemäß angezeigt.

So wird Ihre CSS sein:

p { 
     font-size: 72px; 
     position: relative; 
     margin: 0; 
     padding: 0; 
    } 

    p span { 
     margin: 0; 
     padding: 0; 
     display: inline-block; 
    } 

    .sans { 
     font-family: sans-serif; 
    } 

    .text { 
     border-top: 1px solid blue; 
     line-height: 1.55ex; 
    } 

    .rule { 
     height: 1ex; 
     border-top: 1px dotted red; 
     border-bottom: 1px solid blue; 
     position: relative; 
     left: -7.25em; 
     width: 7.75em; 
     top: 1px; 
    }