10

我试过这个简单的html:

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

并发现尽管样式不同,但此按钮的字体大小看起来比链接的字体大小大。有谁知道为什么样式对于链接和按钮的工作方式不同,以及如何使它们看起来一样?

4

4 回答 4

25

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

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

于 2009-09-30T09:38:11.660 回答
4

在 Chrome 中遇到了同样的问题,后来发现关键原因是

body {
    -webkit-font-smoothing: antialiased
}

将其更改为

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

修复。

于 2013-06-20T23:37:12.577 回答
1

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

  • 这取决于浏览器及其默认设置,也可能因操作系统而异。
  • 按钮和输入字段通常有不同的字体。也设置一下。
  • 当您没有相同的颜色(背景和字体)时,抗锯齿或 ClearType 可能会导致细微差别。
于 2009-09-30T09:39:06.773 回答
-5

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

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

于 2009-09-30T09:14:10.173 回答