1

Google Web Fonts に適用される標準のテキスト シャドウ効果を iOS で使用すると問題が発生します。フォントは 2 重に表示され、font-color の 2 つのレイヤーの背後に影があります。これは、Retina 以外の iPad mini で最も顕著です。私のラップトップ ブラウザでは、このような動作は見られませんでした。

なぜこれが起こっているのかについて何か提案はありますか?

これは、ios ブラウザに簡単に入力できるデモです:リンク

今のところ、メディアクエリを使用して、小さな画面サイズですべてのテキストから text-shadow を取り除く * セレクターがあります。おそらく、問題に対するより良いパッチがあります。

以下は iPad mini のスクリーンショットです。 写真.jpg

スクリーンショット スクリーンショット (iPhone 4S)

4

1 に答える 1

1

検索してもどこにも行きませんでした.テキストサイズと比較したパーセンテージオフセットに関連している可能性があります. px の代わりに % を使用して実験するか、単に以下を追加することができます。

レスポンシブ CSS に追加します。

@media (max-width: 767px) {
    text-shadow: text-shadow: -1px 1px 1px;
}

これにより、小さなテキストでより適切にレンダリングされます

編集 スクリーンショットで質問を更新したようです。このオフセット レンダリングのバグは、ここで説明されているものと同じである可能性があります。問題は、あなたが使用font-weight: boldしていて、Mobile Safari がそれを処理できないことにあるようです。解決策は、それを通常に設定することです。

/*reset for mobile browsers */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
于 2013-02-05T08:52:02.950 に答える