4

Google Webfonts の Dosis フォントを使用して ...

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

Firefox と Safari で広範なテストを行った後、両方のブラウザーですべてを完全にピクセル単位で完全に表示することはできないことを完全に認識していましたが、Photoshop の元のデザイン ビューと同じように正確に表示されますが、最も厄介な問題に遭遇しました。

文字間隔

何を試しても、Webkit ブラウザーで文字間隔を正しく設定できません。

簡単な例:

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

これは、Firefox で、私が望むように完全にうまくレンダリングされます (FF を 15.5px のフォント サイズにハックすると、[だれかが反対しない限り] 大丈夫です)。

ただし、Safari では文字間隔は機能しません。

いくつかの調査の結果、1px未満の文字間隔は許可されないことがわかりましたが、emメジャーを使用すると許可されると言われています。それでいい。

私が使用する場合：

letter-spacing: 0.0618em

何も起こりません。変化なし。文字間隔が狭すぎる。

しかし、私が使用する場合:

letter-spacing: 0.0619em

突然パチンと音がして、文字間隔が広すぎます。10 単語のテキストブロックのように、幅が突然 50 ピクセルを超えます。

理解できません。

これを修正する方法を知っている人はいますか？

ありがとうございました。

4

3 に答える 3

2

使用している単位に関係なく、サファリはピクセル全体に丸められていると思います。

したがって、0.0618em と 0.0619em の差は、0px から 1px に丸められるポイントです。

文字スペースが 0.0619em と 1px を使用してサファリで同じであることに気付いた場合。

残念ながら、私には解決策がありませんが、うまくいけば、あなたが見ているものを説明するのに役立ちます.

于 2012-04-26T19:54:22.207 に答える
1

この問題に対する適切な解決策はありません。Safari / Webkit は、これらのものを正しくレンダリングしません。

同様の問題をカバーする別のスレッドがここにあります

于 2012-05-13T12:56:08.093 に答える
1

これは svg フォントだけが原因のようです! フォントフェイスの URL を並べ替えて、svg を最後に配置すると、問題が解決するはずです。ただし、svg フォントは使用されず、レンダリングは汚れている可能性があります(er)

于 2012-10-01T14:38:31.900 に答える