Warum gibt es unter Windows und Mac OS X einen @ Font-Face-Unterschied in der Zeilenhöhe?

Question

Ich habe jetzt eine Stunde lang nach einer Antwort gesucht, ohne Glück.

Ich zentriere Text vertikal innerhalb der Box mit der CSS-Eigenschaft "line-height". Dies funktioniert gut mit Standard-Safe-Fonts und funktioniert auch gut für "" @ font-Face "" Schrifteinbettung unter Windows.

Auf dem Mac gibt es jedoch ein Problem mit dieser Zentrierung mit "@ font-face". Siehe: http://cl.ly/QBlE/o

Ich weiß nicht, was damit zu tun ist. Die einzige Möglichkeit, dies zu beheben, ist die Verwendung einer anderen Zeilenhöhe für Mac. Aber soweit ich weiß, ist dies ohne JavaScript oder serverseitige Programmierung nicht möglich und scheint für mich nicht die richtige Lösung zu sein.

Beispiel (blaue Box oben):

#header .login { 
    text-decoration:none; 
    margin:11px 9px 0 9px; 
    float:right; 
    font-size:11px; 
    color:#fff; 
    background:url(../img/header-login.png); 
    width:118px; 
    height:26px; 
    line-height:26px; 
    padding:0 0 0 10px; 
    text-transform:uppercase; 
    font-family: 'Helvetica55', Sans-Serif; 
} 

Answer 1

Statt unterschiedliche Linienhöhen verwenden, versucht die font-size-adjust Eigenschaft mit einem Wert von auto verwenden.

Vom W3C:

In Situationen, in denen Schrift Rückfall auftritt, Ausweich Schriftarten möglicherweise nicht das gleiche Seitenverhältnis wie die gewünschten Schriftfamilie teilen und somit weniger lesbar erscheinen. Die font-size-adjust-Eigenschaft ist eine Möglichkeit, die Lesbarkeit von Text beizubehalten, wenn ein Font-Fallback auftritt. Dies geschieht durch Anpassen der Schriftgröße, so dass die x-Höhe unabhängig von der verwendeten Schriftart gleich ist.

Answer 2

Versuchen Sie zunächst, die Zeilenhöhe von px auf em zu setzen.

Wenn das nicht funktioniert, kann es durch Standardstile verursacht werden, die für jeden Browser unterschiedlich sind. Diese Standardstile könnten mit Ihren Stilen in Konflikt geraten. Versuchen Sie also, eine reset.css auf Ihrer Seite zu verwenden.

Answer 3

Das Problem liegt höchstwahrscheinlich in der verwendeten Schriftart. Jede Schriftart hat ihre eigenen Metriken, und wenn sie nicht richtig optimiert sind, können sie von einer Plattform zur anderen abweichen. Eine genauere Erklärung hierzu finden Sie unter http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/.

Sie könnten versuchen, die Schriftart selbst mit einem Werkzeug wie http://fontforge.org/ zu ändern. Dies ist jedoch nicht einfach und erfordert einige Versuche und Fehler, um es richtig zu machen. Es kann auch die Lizenz der von Ihnen verwendeten Schriftart verletzen.

Mein Tipp: Wählen Sie eine Schriftart, die besser für die Verwendung im Internet optimiert ist. Nehmen Sie eine Schriftart von Typekit oder dergleichen und ich wette, Sie erhalten konsistentere Ergebnisse.

Answer 4

Vielleicht 'vertical-align:' helfen kann,

überprüfen Sie bitte diese fiddle

dies den Unterschied erklären, ich denke, jeder Browser unterschiedlichen Standardwert hat,

hier habe ich erstellt 4 verschiedene span-Tags, um den oberen, mittleren, unteren und Standardwert (nicht zugewiesen) des vertikalen Ausrichtungswerts anzuzeigen,

Bitte Werte ändern, wenn das hilft,

, wie Sie Bilder in den Button verwenden, bitte das Bild überprüfen gesetzt und mit 0 0 dh background:url(../img/header-login.png) no-repeat 0 0;

das das Bild übertragen wird von der 0 nach links und 0 top, die Ihnen helfen idnetify wenn und Bild nicht ist richtig erzeugt ..

Bitte antworten Sie, wenn das Problem nicht gelöst ..

Answer 5

Aus meiner Erfahrung für Multi-Browser und Multi-Plattform-Websites, die Sie wirklich die Pixel in Schriftarten fallen sollte und mit ems starten.

Hier ist ein nützliches convertion Tisch Werkzeug:

http://pxtoem.com/

Lassen Sie mich wissen, ob es noch mit em passiert. Beachten Sie auch, dass unterschiedliche Schriftarten unterschiedliche Verhaltensweisen aufweisen und die Standardgröße (Basisgröße) ebenfalls abweichen kann. Wenn Sie sicherstellen möchten, dass es genau die gleiche Größe hat, sollten Sie neben der Verwendung von 'em' auch eine OpenType-Schriftart verwenden und diese in Ihr CSS einbetten, wobei Sie in jedem Bildschirm oder Browser die gleiche Schriftart und Größe haben.

Answer 6

Betriebssysteme können Schriftarten auf verschiedene Arten darstellen. Man kann von unten anfangen und andere können von oben anfangen, da ihr Algorithmus anders ist. Wenn das Problem CSS wäre, würde es nicht durch eine andere Schriftart gelöst werden.

ich eine andere Frage similiar zu Ihrem eine gefunden haben, können Sie prüfen, ob es für Ihre Situation: Mac vs. Windows Browser Font Height Rendering Issue