Question

我试过这个简单的html：

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

并发现该按钮的字体大小看起来比链接的字体大小更大。有没有人知道为什么样式对链接和按钮的工作方式不同，如何使它们看起来一样？

Answer 1

字体大小相同。但看起来不同，因为默认页面字体与默认输入字段字体不同。将两个元素上的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%;
}

在页面和表单字段上获得一致的字体。

Answer 2

Chrome中存在同样的问题，后来发现关键原因是

body {
    -webkit-font-smoothing: antialiased
}

将此更改为

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

修好了。

Answer 3

对我来说看起来一样，在Firefox，IE6和Chrome上测试过：http://jsbin.com/oveze
请记住：

这取决于浏览器及其默认值，也可能因操作系统而异。
按钮和输入字段通常有不同的字体。也设置它。
当您没有相同的颜色（背景和字体）时，消除锯齿或ClearType可能会略有不同。

Answer 4

您不应该为按钮使用太多CSS，因为它们的显示取决于用户操作系统。

相反，您可以使用例如图像。

按钮和链接的字体大小

4 个答案: