CSS benutzerdefinierte Schriftart vertikale Versatz (Bug?)

Question

Ich benutze benutzerdefinierte Schriftart in meinem CSS mit dieser Methode:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

Jeder Browser rendert diese Schriftarten durch seine eigene Art und Weise mit vertikalen oben und unten versetzt wie dieses

Was mache ich falsch? Danke

Answer 1

Es ist möglich, dass Sie nichts falsch machen. Hier sind einige Punkte, die vielleicht von Ihnen kontrolliert werden, einige nicht.

1. Nur um sicher zu sein, setzen Sie explizit vertical-align: baseline.
2. Die verschiedenen Dateien (.eof, .woff, .ttf) selbst sind möglicherweise nicht gleich definiert, und daher verwenden verschiedene Browser unterschiedliche Dateien und zeigen Unterschiede an.
3. Nicht sicher, ob mit zwei src Anrufe wird die Dinge durcheinander, aber man kann versuchen, die zweite eine Eliminierung:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'), 
     url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Das sind alles nur Vermutungen. Sie müssen # 1, 3 testen. Wenn das Problem # 2 ist, bin ich nicht sicher, ob es eine elegante Lösung gibt.

Es gibt natürlich die Einschränkung auf this site:

Beachten Sie, dass Schriftart-Rendering weit über Browser und Betriebssysteme variieren kann. Viele Entwickler haben so schlechte Ergebnisse von Windows und Internet Explorer, dass sie vermeiden, benutzerdefinierte Schriftarten insgesamt zu vermeiden. Achten Sie immer darauf, Ihre Ergebnisse in allen Browsern genau zu untersuchen, um zu entscheiden, ob die Qualität akzeptabel ist.

aktualisieren

This post gibt einige Hinweise über möglicherweise Rendering-Probleme zu lösen. Dies ist für Font-Eichhörnchen, und er stellt fest, speziell:

Wenn Sie das Kit heruntergeladen haben, Sie könnten versuchen, die Schriftart mit der Generator zu regenerieren. Wir nehmen regelmäßige Anpassungen am Generator vor, die das Hinting oder Rendering der Schriftart verbessern könnten.

Aber er bestätigt auch,

nicht den Schwarzen Peter weitergeben, aber die häufigste Ursache ist eine schlechte Original Schriftart.

Das geht mit meinem Punkt # 2.

Answer 2

Ich hatte das gleiche Problem und die Lösung war, die Schriftart mit den Eigenschaften des Originals zu rekonstruieren, ohne etwas in einer neuen Datei mit Hight Logic Font Creator zu ändern, die Schriftart ist unverändert und gleich dem ursprünglichen Problem ist korrigiert und ausgerichtet Die Perfektion in allen Browsern einschließlich IE6, war die Arbeit von ein paar Stunden, aber das ist das Ergebnis, falls Sie einige Benutzer benötigen.

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

Ich weiß, dass es 5 Jahre her, seit der OP die Frage gestellt, aber ich fand diese große Technik auf der Textgrundlinie ausgerichtet immer richtig.

Grundsätzlich muss der Textcontainer ein Inline-Block mit Zeilenhöhe sein: 0; Dann Sie einen Inline-Block-Pseudoelement erstellen und seine Höhe entsprechend der line-height Sie wollten:

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/