html - 按钮和链接的字体大小

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，因为它们的显示取决于用户的操作系统。

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