@font-face-und line-height Problem
Bild unten zeigt das Ergebnis:
div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }Einer mit Wiesbaden (die schriftart) und die andere ohne.font-face schriftart scheint zu ignorieren, die line-height-Eigenschaft.
Ist es font-face-Ausgabe oder die Schrift?
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Kurz gesagt, es ist nicht ein Problem mit entweder. Sie verhält sich genau, wie Sie sein sollten. Siehe deine blauen hintergrund? Das ist Ihre line-height. Line-height nicht auf die Schrift selbst, sondern um den Abstand der Zeilen des Textes.
Einige Schriftarten sind in verschiedenen Größen, auch wenn die gleiche
font-size. Es ist die Art, wie die Zeichen gerendert werden. Wenn Sie möchten, dass Ihre text größer, erhöhen Sie die Schriftgröße. Wenn Sie möchten, fallbacks auf die gleiche Größe, die Sie verwenden können, ähnlich große Schriften (look up "font-stack-Generatoren" für die Hilfe), oder check-out die CSS3font-size-adjustEigenschaft (bitte beachten Sie, dass es CSS3 ist, so dass Sie überprüfen wollen it-Unterstützung).Eigentum
line-heightnur gibt der vertikale Abstand zwischen dem Anfang einer Zeile und den Anfang der nächsten. Wenn Sie typisiert, etwas, das nahm zwei Linien, der start der 2. Zeile sollte in der gleichen vertikalen position mit entweder Schrift.Wie es scheint, das ist nur, wie dein font sieht 'font-size: 50px'. Wenn Sie wollten, könnten Sie erhöhen die
font-sizewährendline-height: 50pxzu korrigieren.Ich hatte ein ähnliches Problem, aber ich habe eine Cufon Skript anstelle von fontface zu vermeiden Browsern Probleme. Löst sich mein line-height Problem änderte ich den doctype von transitional zu strict. Versuchen Sie, dass.
Den folgenden Geige veranschaulicht die Unterschiede zwischen 4 Schriftarten (3 sehr gängige Schriftarten gefunden, die auf Macs, PCs, etc). Ist eine Google-schriftart. Egal, 4 Schriftarten - vier verschiedene Ergebnisse. Wenn eine Konstruktion zu stark auf ein 'nicht-standard' - font, werden Sie sicher, dass die fallbacks nicht Blasen die ganze Sache.
Achten Sie insbesondere auf die Unterschiede in:
Elternteil)
_http://jsfiddle.net/suK2U/