-1

私はCSSを使用してメニューボタンのスタイルを設定するこのWebサイトを開発しています。

これらはすべてWindowsで見栄えがしますが、OS Xで試してみると、誤ってレンダリングされます。さらに奇妙なのは、それらがページでは良く表示されるが、[私の意見では]別のページではあまり良くないということです。

フォントはぼやけてレンダリングされます：
フォントはぼやけてレンダリングされます

フォントは「スキニー」モードでレンダリングされます。
フォントはでレンダリングされます

また、ホバー時にCSS3トランジションが適用されている要素（ロゴなど）にカーソルを合わせると、ぼやけてレンダリングされたフォントがスキニーにレンダリングされますが、CSS3アニメーションが終了するとぼやけたレンダリングが再開されることがわかりました。

原因のCSS遷移：

.logo {
    float: left;
    margin-left: 0px;

    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;

    -webkit-transform: rotate(0deg);
}

.logo:hover {
    -moz-transition: all 0.3s ease-out;  /* FF4+ */
    -o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.3s ease-out;  /* Saf3.2+, Chrome */
    transition: all 0.3s ease-out;  

    -moz-transform: rotate(-3deg) scale(1);  /* FF3.5+ */
    -o-transform: rotate(-3deg) scale(1);  /* Opera 10.5 */
    -webkit-transform: rotate(-3deg) scale(1);  /* Saf3.1+, Chrome */
    transform: rotate(-3deg) scale(1);  

    zoom: 1;
}

この現象はここでライブで観察できます：http：//pote.ca。

ヘルプ？お願いします？
前もって感謝します！:)

アップデート：

私はverdanaメニュー項目に使用しており、//bunvenitメッセージには別のフォントを使用しています。

見栄えの悪いレンダリングされたフォントの別の例は、GoogleのAnalyticsページのメニューです。

ここに画像の説明を入力してください

4

1 に答える 1

1

これは「ひどく」レンダリングされるのではなく、Windowsとは全体的に異なるフォントレンダリング戦略を使用します。OS Xは文字の元の形状をよりよく保持する傾向がありますが、Windowsは文字をピクセルグリッドに押し込もうとします。結果は「悪い」ではなく、異なって見えます。そして、はい、あなたはあなたのデザインの一部としてこれを考慮に入れる必要があります。

参考までに、フォントレンダリングの詳細、コーディングホラー：Appleのフォントレンダリングの何が問題になっているのかを参照してください。等

于 2012-12-06T12:28:59.867 に答える