Jak mogę ujednolicić wysokość linii Helvetica Neue w różnych przeglądarkach (a nie pogrubioną czcionką)?

Question

Opracowuję więc witrynę, która będzie musiała działać w wielu przeglądarkach, niezależnie od tego, czy będą to komputery stacjonarne, urządzenia przenośne czy inne. Projektanci, jak często robią to projektanci mac, użyli Helvetica Neue jako czcionki dla całej witryny. Próbuję uruchomić go za pomocą włączania @font, a to pokazuje się dobrze ... ale wzrost linii powoduje, że mam wrzód.

Zobacz poniższe zdjęcie: Arial, Helvetica Neue Std i Helvetica Neue Pro. Windows Chrome traktuje wszystkie trzy jak mistrz, ale reszta tutaj jest szalenie niespójna. Wszystkie są teraz ustawione na wysokość linii 18px, próbowałem również linii wysokości: 1, ale bez skutku.

HTML/CSS Używam dla celów tego testu:

<style type="text/css"> 

    @font-face { font-family: "Helvetica Neue Std"; src: url('HelveticaNeueLTStd-Md.otf') format("opentype"); } 
    @font-face { font-family: "Helvetica Neue Pro"; src: url('HelveticaNeueLTPro-Md.otf') format("opentype"); } 

    .box { 
     float: left; 
     padding: 10px; 
     border: 1px solid red; 
     font-size: 18px; 
     line-height: 18px; 
    } 

    .box .text_1 { font-family: Arial; } 
    .box .text_2 { font-family: "Helvetica Neue Std" } 
    .box .text_3 { font-family: "Helvetica Neue Pro" } 

</style> 

<div class="box"> 
    <span class="text_1">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_2">Aw Nuts</span> 
</div> 

<div class="box"> 
    <span class="text_3">Aw Nuts</span> 
</div> 

Am I po prostu pecha tutaj? Rozważam właśnie użycie Arial w tym momencie, ponieważ próba stworzenia pasków narzędzi i przycisków, w których tekst jest zorientowany pionowo, okazuje się koszmarem. I na pewno nie chcę sniff dla systemu operacyjnego i przeglądarki i pisać niestandardowych wysokości linii dla każdego elementu.

Answer 1

mogę zaoferować ten kawałek szczegółowe tła na why line height is a pain.

Podsumowując, różne sposoby obsługi pionowych odstępów między przeglądarkami mogą być przyczyną tych niespójności. Niektóre obliczają od góry najwyższy wznoszący czcionki i dodają całą przestrzeń linii poniżej, podczas gdy inne dzielą odstępy przed i po linii tekstu.

Answer 2

Spróbuj tego.

*{ 
    margin: 0px; 
    padding: 0px; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

font-size: 100% automatycznie zresetować czcionek domyślnych i trzeba ręcznie określić rozmiar czcionki na str div itp

Answer 3

To wygląda jak numer vertival metrics. Czcionka nigdy nie zostanie wyrównana, ponieważ ma słabe dane pionowe. Jedynym sposobem na uzyskanie konsekwentnie renderowanej czcionki w różnych przeglądarkach jest naprawienie jej pionowych danych.

Większość dostawców czcionek pozwala aktualizować i poprawiać pionowe metryki czcionki przed jej pobraniem. Mogą jednak inaczej nazywać tę opcję. Np .: Fontsquirrel nazywa to Auto-Adjust Vertical Metrics, myFonts.com nazywa to Line Height Adjustments.

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?