1

この問題は、Mac Safari でのみ発生します。
他のブラウザ・他のOSでは正常に動作します。

問題: トップ ナビゲーションのフォントの太さを確認してください: http://www.octa.com (WordPress)

次に、トップ ナビゲーションのフォントの太さを確認します: http://www.octa.com/products (Magento)

これらは異なるコード (WP と Magento) によって提供されますが、CSS は 2 つのページ間でほぼ同じであることに注意してください。

関連する CSS のビットは次のとおりです。

nav.menu li a {
    font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
    font-size: 20px;
    text-align: left;
}

nav.menu li a, #subnavwrapper nav li a {
    color: #FFFFFF;
    font-weight: normal;
    height: 50px;
    line-height: 50px;
    padding: 0 46px 0 0;
}

nav li a {
    display: block;
    line-height: 1em;
    text-decoration: none;
}

body {
    color: #000000;
    font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-    serif;
    font-size: 14px;
    line-height: 1.55em;
    text-align: center;
    background: black;
}

フォントは @font-face を使用してインポートされることに注意してください。

私はすべてを試しました-SOおよび他の記事に関する多くの回答。他の回答/リソースから収集された以下のスタイルのいずれも、フォント表示を修正していないことに注意してください。

font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
4

3 に答える 3

1

-webkit-font-smoothing: antialiased; を試してください。

この単純な変更により、Safari の font-weight プロパティの信頼性が大幅に向上したことがわかりました。

于 2014-05-31T05:33:35.500 に答える
1

(コメントを投稿することはできないため、投稿して会話に調査結果を追加することしかできません。)

固定位置要素のテキストは、Safariの他のタイプの配置よりも軽量に見えることがわかりました。したがって、他の場所で提案されているように無視できませんでした。

追加--webkit-font-smoothing: antialiasedするとこれは解決しますが、Firefox よりも軽く見えます。これで修正できます -moz-osx-font-smoothing: grayscale

問題を表示するには、ここをいじってください- Safariのみ

于 2015-03-24T17:06:51.670 に答える
0

@JukkaK.Korpela からのコメント/提案により、私はいくつかのことを発見しました。

まず、問題の根本は次のとおりです。

-webkit-backface-visibility: hidden;

この回答ごとにアニメーションの問題を解決するためにコードに追加されたもの: iPhone WebKit CSS animations cause flicker

フォントとちらつきを解決する方法はわかりませんが、少なくともどちらを解決するかを選択できます。

次に、熱心な Firefox/Firebug ユーザーとして、Safari で Firebug Lite と Safari の別の拡張機能を使用しようとしましたが、うまくいきませんでした。そのため、Safari のみの問題をトラブルシューティングしようとしている可能性のあるすべての人に、ここに大きなヒントがあります。

Safariの「現像」ツール。今日検索するまで全く知りませんでしたが、ツールバーのメニュー項目です。表示されない場合は、[設定] -> [詳細設定] に移動し、[ツールバーに開発メニューを表示する] をオンにします。

そのツールを使用して、これを迅速にトラブルシューティングして解決することができました。

于 2013-10-01T14:18:33.430 に答える