html - 输入字体粗细小于 400

Question

我正在尝试为我的网站使用 300 的字体粗细，并且输入中的文本拒绝超过 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';}