Jak uzyskać górną krawędź do glifów czcionki?

Question

Potrzebuję w projekcie, aby wyświetlić reguły na poziomie linii bazowej, wysokości xi wysokości wierzchołków kilku próbek czcionek. Mam pod opieką linię bazową i wysokość x, ale mam problem z uzyskaniem ogólnej reguły CSS, która narysuje obramowanie na wysokości wierzchołka dowolnej czcionki, do której stosuję regułę. Zmieniłem wysokość linii, ale odstęp między glifami czcionki a górną częścią jej układu różni się od czcionki do czcionki, więc ustawienie jej raz nie będzie działać dla żadnej czcionki.

Ten przykład ilustruje Kod Pen problem: http://codepen.io/DrSpatula/pen/BAgqG

Answer 1

to jest bardzo brudny, ale czy spróbował jeden piksel .gif jako powtarzalną tle wtedy można ustawić swoją pozycję w stosunku do czcionki?

Answer 2

Może mogę pomóc. Zrobiłem małe skrzypce, żebyś mógł je zobaczyć. (http://jsfiddle.net/dgxJh/1/)

Obawiam się jednak, że dzięki temu rozwiązaniu będziesz musiał zmienić szerokość linii za pomocą różowej linii dla każdego rozmiaru czcionki i każdej czcionki. Ale w istocie będzie pozycjonować rozpiętość nad tekstu za pomocą następującego kodu:

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

Nie zapomnij umieścić swój pojemnik względną

Answer 3

Jesteś teraz zastosowanie line-height do p. Jeśli ją tam usuniesz i zastosujesz wysokość linii do span.text i ustawisz ją na wartość 1,55ex, to będzie ona poprawnie wyświetlana.

Więc CSS będą:

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; 
    }