按钮和链接的字体大小

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-size是一样的.但它看起来不同,因为默认页面字体与默认输入字段字体不同.将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;
}

修复。