Html 按钮和链接的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1496949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-Size for Button and Link
提问by Kate
I tried this simple html:
我试过这个简单的html：
TEST FONT SIZE</br>
<input type="button" value="test bytton" style="font-size:20px">
<a style="font-size:20px">test link</a>
and found out that the font size of this button looks bigger than the font size of the link in spite of style. Does anybody know why style works differently for link and for button, and how to make them looks like the same?
并发现该按钮的字体大小看起来比链接的字体大小大，尽管样式。有谁知道为什么链接和按钮的样式不同，以及如何使它们看起来相同？
回答by bobince
The font-size is the same. But it looksdifferent because the default page font is different from the default input-field font. Set the font-familyon both elements the same and they'll look the same.
字体大小是一样的。但它看起来不同，因为默认页面字体与默认输入字段字体不同。将font-family两个元素上的设置为相同，它们看起来相同。
I usually do:
我通常这样做：
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%;
}
to get consistent fonts over the page and form fields.
在页面和表单字段上获得一致的字体。
回答by Ish
Had the same problem in Chrome, later figured out that key cause was
在 Chrome 中有同样的问题，后来发现关键原因是
body {
-webkit-font-smoothing: antialiased
}
changing this to
将此更改为
body {
-webkit-font-smoothing: subpixel-antialiased;
}
fixed it.
修复。
回答by Kobi
Looks the same to me, tested on Firefox, IE6 and Chrome: http://jsbin.com/oveze
Please keep in mind:
对我来说看起来一样，在 Firefox、IE6 和 Chrome 上测试过：http: //jsbin.com/oveze
请记住：
- This depends on the browser and its defaults, and may also be different depending on the operating system.
- Very often there's a different font for buttons and input fields. Set it too.
- Anti-aliasing or ClearType can cause a slight difference when you don't have the same colors (background and font).
- 这取决于浏览器及其默认设置，也可能因操作系统而异。
- 按钮和输入字段通常有不同的字体。也设置一下。
- 当您没有相同的颜色（背景和字体）时，抗锯齿或 ClearType 可能会导致轻微的差异。
回答by brainfck
You should not use much CSS for buttons, because their display depends on the users operating system.
您不应该为按钮使用太多 CSS，因为它们的显示取决于用户的操作系统。
Instead you can use for example images.
相反，您可以使用例如图像。
