Pogrubiona wysokość linii tekstu jest wyższa niż normalna wysokość linii tekstu

Question

Musi być coś podstawowego, czego tu brakuje. Pomyślałem, że grubość czcionki: pogrubiona nie powinna zmieniać ilości pionowej przestrzeni tekstu. Zwłaszcza, gdy wysokość linii jest ustawiona na wyższą niż rozmiar czcionki.

http://jsfiddle.net/Arkkimaagi/7xAyy/

Na moim OSX chromem te trzy szczyty tekstowe nie pasują. Drugi z grubością czcionki: pogrubiony jest o 1 piksel wyższy niż pozostałe. Trzeci div jest tylko przykładem ustalania problem (słabo)

Próbuję ustawić line-height do czegoś konkretnego (18px) Tutaj, aby mieć „pionowy rytm”

Moje pytanie brzmi, jak mam wytłuszczony i normalny tekst zarówno z taką samą wysokością linii jak w przykładzie?

[edit:] oto co widzę na moim mac

Również tutaj jest to, co ment przez "pionowego rytmu": http://www.alistapart.com/articles/settingtypeontheweb - siatki linii bazowych jest bardziej widoczna w przykładzie: http://www.alistapart.com/d/settingtypeontheweb/example_grid.html

Answer 1

To całkowicie zależy od czcionek, których używasz. Nic na temat renderowania tekstu OSX ani Chrome nie zapewni, że dwie różne czcionki (a Helvetica-neue i Helvetica-neue-bold będą dwiema różnymi czcionkami) będą miały tę samą pionową przestrzeń, nawet przy tym samym rozmiarze czcionki i wysokości linii.

Mimo że jest to zbyt wiele do zapytania, można by pomyśleć, że dwie różne czcionki z tej samej rodziny mogą być spójne i zazwyczaj są, ale niestety dwie czcionki, które wybrałeś, nie są.

Answer 2

Czasami dodanie górnego pionowego wyrównania rozwiąże ten problem (w zależności od rozmiaru czcionki/rodziny).

strong { vertical-align: top; } 

W swojej skrzypce przykład, ponieważ ustawiłeś wysokość linii na pojemniku (div), można po prostu dodać następujące:

span { line-height: 1em; } 

Answer 3

Napotkałem bardzo podobny problem z czcionką Chivo : http://www.fontsquirrel.com/fonts/chivo. Teraz używam najbrzydszy siekać (działa na bieżącym Firefox i Chrome, IE jeszcze niesprawdzone):

strong { vertical-align: top; position: relative; top: -1px; } 

Staram się nie poddawaj się na Chivo dość trudne, jak widać ...

Answer 4

Ustawianie bezwzględna wysokość linii zarówno na kontenerze, jak i pogrubiony tekst, lub pogrubienie tekstu na wysokości 1em (jak mówi DaveC powyżej), naprawiają to, np. z jsfiddle wystarczy dodać line-height: 1em

.bolded span { 
    font-weight:bold; 
    line-height: 1em; 
} 

Albo dlaczego nie podążać standardy HTML i używać poprawnych tagów zamiast pogrubione przęseł? Na przykład.

strong, em { line-height: 1em } 

Answer 5

Myślę, że jest to problem z czcionką. Zauważyłem różne wysokości linii dla kursywy Nunito (Google Web Font). Kiedy przełączyłem się na przerobioną wersję tej czcionki o nazwie "Nunito Sans", problem został rozwiązany.