web-dev-qa-db-ja.com

ボタンとリンクのフォントサイズ

私はこの単純なhtmlを試しました：

TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>

そして、このボタンのフォントサイズは、スタイルにもかかわらず、リンクのフォントサイズよりも大きく見えることがわかりました。リンクとボタンでスタイルの動作が異なる理由と、それらを同じように見せるための方法を知っている人はいますか？

htmlcssfont-size
8
Kate

フォントサイズは同じです。ただし、デフォルトのページフォントがデフォルトの入力フィールドフォントと異なるため、looksは異なります。をセットする font-family両方の要素で同じであり、同じように見えます。

私は通常します：

body, input, button, select, option, textarea {
    font-family: ...; /* whatever font */
}
body {
    font-size: x%; /* whatever base font size I want */
}
input, button, select, option, textarea {
    font-size: 100%;
}

ページフィールドとフォームフィールドで一貫したフォントを取得します。

24
bobince

Chromeでも同じ問題がありましたが、後でその主な原因は

body {
    -webkit-font-smoothing: antialiased
}

これをに変更します

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

それを修正しました。

4
Ish

Firefox、IE6、Chromeでテストした私には同じように見えます： http://jsbin.com/oveze
次の点に注意してください。

  • これはブラウザとそのデフォルトによって異なり、オペレーティングシステムによっても異なる場合があります。
  • 多くの場合、ボタンと入力フィールドには異なるフォントがあります。それも設定します。
  • 同じ色（背景とフォント）がない場合、アンチエイリアスまたはClearTypeによってわずかな違いが生じる可能性があります。
1
Kobi