html - 入力の font-weight が 400 未満

Question

サイトで 300 の font-weight を使用しようとしていますが、入力内のテキストが 400 よりも細くなりません。以下に例を示します。

http://jsfiddle.net/m8FZ6/3/

<span style="font-weight: 300;">300 weight:</span> <input type="text" value="text" style="font-weight: 300;"></input><br />
<span style="font-weight: 400;">400 weight:</span> <input type="text" value="text" style="font-weight: 400;"></input><br />
<span style="font-weight: 700;">700 weight:</span> <input type="text" value="text" style="font-weight: 700;"></input>

FF 25、Chrome 30.0.1599.69、および IE10 でこれに気付きました。それを機能させる方法はありますか、それとも別の要素を使用する必要がありますか?

Answer 1

input要素 (および などの他の要素textarea) は、親要素からフォントを継承しません。独自のデフォルト フォントがあります。

CSS セレクターを に変更するとhtml, input、すべての入力で適切なフォントの重みが設定されていることがわかります。

Answer 2

入力ボックスのフォントファミリーを明示的に設定する必要があります

http://jsfiddle.net/m8FZ6/5/

input {font-family: 'Roboto';}