Safari, letter-spacing, mit benutzerdefinierten schriftart

Mit der Dosis Schriftarten von Google Webfonts ...

@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);

nach umfangreichen Tests in Firefox und Safari, während Sie, vollkommen bewusst, dass ich nicht immer bekommen beide Browser anzeigen, um Sie alle perfekt pixel-fein als der ursprüngliche Entwurf-Ansichten in meinem photoshop, stolperte ich über die am meisten störenden Probleme:

letter-spacing

Was auch immer ich versuche, ich kann nicht Holen Sie sich die letter-spacing rechts in webkit-Browsern.

Einem einfachen Beispiel:

.text-basic {
    font-weight:        200;
    font-size:          16px;
    letter-spacing:     0.52px;
    line-height:        22px;
}

Macht dies völlig in Ordnung, wie ich es möchte, im Firefox (noch besser, wenn ich hack FF in 15.5 px Schriftgröße, was in Ordnung ist [es sei denn jemand hat Einwände]).

Jedoch in Safari die letter-spacing will einfach nicht funktionieren.

Nach einigen Recherchen fand ich, dass es nicht zulassen, dass letter-spacing unten 1px, aber es wird gesagt, dass es nicht so wenn ich em Maßnahmen. So soll es sein.

Wenn ich bis zu:

letter-spacing: 0.0618em

Nichts passiert. Keine änderung. Zeichenabstand zu gering.

Aber wenn ich:

letter-spacing: 0.0619em

Plötzlich Sie einrastet, und Zeichenabstand ist viel zu hoch. Wie ein textblock 10 Wörter plötzlich nimmt mehr als 50 zusätzlichen Pixel in der Breite.

Ich verstehe es nicht.

Weiß jemand, wie man dieses Problem beheben?

Danke.

InformationsquelleAutor SquareCat | 2012-04-16

  1. 2

    Ich glaube safari ist Rundung auf ganze Pixel unabhängig von dem Gerät Sie verwenden.

    Also der Unterschied zwischen 0.0618 em und 0.0619 em ist der Punkt, wo es Runden von 0px, 1px.

    Wenn Sie bemerken, der Brief, der Raum ist identisch in safari mit 0.0619 em und 1px;

    Leider habe ich keine Lösung, aber ich hoffe, dass hilft zu erklären, was Sie sehen.

    mit ems, der Abstand ist viel besser. ich sah dieses in chrome vs. safari....nach dem Wechsel zu em ' s, Sie ausgeglichen: jsfiddle.net/EdbNt/1
    ja, das 'bessere', aber das ist, wenn Sie gehen für Reale Abstand zwischen den Buchstaben (wie in Ihrem Beispiel). ich fürchte, es gibt keine wirkliche Lösung dafür. seine nur störend, da der Unterschied so enorm ist.
    "echte " Zeichenabstand"? im Gegensatz zu falschen letter spacing? wenn Sie definieren Ihre Werte in ems, font-size zu haben, sollten Sie Ihre gewünschte Lösung
    Wie oben gesagt, Safari ist NICHT rendering diese Dinge richtig, unabhängig davon, welche Methode ich verwenden (px oder em). Durch "echte" meine ich tatsächliche, korrekt berechnete Zeichenabstand. Ich beginne zu zweifeln, es ist eine richtige Lösung für dieses problem.

    InformationsquelleAutor kgiff

  2. 1

    Gibt es keine richtige Lösung für dieses Problem. Safari /Webkit Rendern, diese Dinge falsch.

    Einem anderen thread deckt ähnliche Probleme finden Sie hier

    InformationsquelleAutor SquareCat

  3. 1

    Scheint dies verursacht nur svg fonts!
    Sortieren Sie Ihre font-face-urls setzen svg Letzte, es sollte das problem lösen. Aber svg-fonts nicht gewöhnen und rendering könnte schmutzig sein(er)

    dies ist tatsächlich wahr, aber bewegen der .svg ist gut zu befestigen Chrom-rendering in Windows, aber es beeinträchtigt das letter-spacing in Safari (auch auf Windows)
    auch, wenn .SVG ist dort oben (vor .WOFF) ist es egal, wenn Sie den Zeichenabstand in px oder em ist (ich habe ihn -1px), entweder Weg, es wird nicht korrekt wiedergegeben. Die einzige Lösung die ich bisher gefunden ist die Ziel-browser browser-und haben eigene @font-face-Deklarationen.

    InformationsquelleAutor Armel Larcier

Schreibe einen Kommentar