css - ボタンに適用されないフォントスムージング

Question

このスニペットを使用して、CSS 変換を使用するときに Webkit がアンチエイリアシングを変更しないようにしました。

html{ -webkit-font-smoothing: antialiased; }

ほとんどの場合、これで問題なく動作しますが、次の HTML を使用して Bootstrap をいじっていると、chrome に奇妙な点があることに気付きました。

<button class="btn btn-inverse">John Doe</button>
<a class="btn btn-inverse">John Doe</a>

これは、OSX/Chrome での表示方法です。

ここに画像の説明を入力

フィドル: http://jsfiddle.net/hY2J7/ . 実はボタンには全く適用されていないようです。Webkit ですべての要素に対して同じアンチエイリアシングをトリガーするより安全な手法はありますか?

score 15 · Accepted Answer

15

* {-webkit-font-smoothing: antialiased;}

于 2012-12-03T00:33:42.727 に答える

score 14 · Accepted Answer

-webkit-font-smoothing は標準プロパティではないため、継承ルールが適切に定義されていません。

この場合、ボタン要素の場合、-webkit-font-smoothing のデフォルト値は「継承」ではなく「自動」です。

この CSS ルールを追加することで、これを解決できます。

button {
    -webkit-font-smoothing: inherit;
}

これで、ボタン要素は、設定した値を継承する必要があります。

他のいくつかのテストを実行して、他の要素も同じ動作を示すかどうかを確認することもできます。

score 0 · Accepted Answer

0

于 2012-12-03T07:58:01.560 に答える

score 0 · Accepted Answer

このコードを試してください:

.btn{
  text-shadow: 0 0.3px 2px rgba(255,255,255, 0.9);
}

</p>

score 0 · Accepted Answer

これはもう試しましたか？

-webkit-backface-visibility: hidden;

このjsfiddleの更新で、 OS XのChromeで動作しています

5 に答える 5