0

Web サイトを開発していますが、Safari でのみフォントのレンダリングに問題があり、解決策が見つからないことに気付きました。

基本的に、私は自分のウェブサイトで 2 つのカスタム フォントを使用しました。私のpsdファイルを尊重するために、0.05emの文字間隔があります。

私のフォントは、Chrome、Firefox、Internet Explorer ではうまく表示されます。しかし、Safari では、奇妙なことに、文字間隔が表示されず、機能しません。Webkit に問題がある可能性があることをどこかで読みましたが、その場合、なぜ chrome で動作するのでしょうか? Safari で Web サイトが本当にひどいものになっているので、修正を見つける必要があります。

これを修正する方法がないとは信じられません。

何かお考えがあれば、喜んでお受けいたします。

以下は私のコードです。

フォントを宣言する CSS:

@font-face {
    font-family: 'univers_lt_std_59_ultracnRg';
    src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot');
    src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.woff') format('woff'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.ttf') format('truetype'),
         url('fonts/univers-lt-std-59-ultra-condensed-webfont.svg#univers_lt_std_59_ultracnRg') format('svg');
}

私の段落のCSS：

color: #57585a;
font-family: 'univers_lt_std_59_ultracnRg';
letter-spacing: 0.05em;
font-size: 19.58px;
text-transform: uppercase;
-webkit-font-kerning: initial;
line-height: 26.47px;

Chrome Firefox および Internet Explorer でのレンダリング

ここに画像の説明を入力

Safari でのレンダリング

ここに画像の説明を入力

明らかに文字間隔が機能しません..

また何か思いつきましたらよろしくお願いします。

4

1 に答える 1

1

文字間隔の相対値の代わりにピクセルを使用してみてください。また、font-size と line-height には丸数字を使用します。Safari は異なる丸め方をすることが知られています。

于 2013-11-19T23:05:11.660 に答える