字体大小的按钮和链接

我想这个简单的html：字体大小的按钮和链接

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

，并发现这个按钮的字体大小看起来比链接的，尽管风格的字体大小大。有人知道为什么样式对链接和按钮的工作方式不同，以及如何让它们看起来像一样？

来源

2009-09-30 Kate

字体大小是一样的。但它看起来不同，因为默认页面字体不同于默认输入字段字体。将两个元素上的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-30 09:38:11 bobince

我为链接和按钮设置了相同的字体系列，并获得相同的结果。按钮和链接内的文字大小不同。 – Kate 2009-09-30 10:54:12

适用于我，在任何浏览器中。发布你的确切测试用例不起作用？ – bobince 2009-09-30 11:29:59

好我需要这个以及它的作品...谢谢bobince – Ljubisa 2014-01-26 04:29:57

-4

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

相反，您可以使用图像。

来源

2009-09-30 09:14:10 brainfck

使用图像不是多用途的。 – Kate 2009-09-30 10:49:17

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

这取决于浏览器和它的默认值，并根据操作也可能不同系统。
通常，按钮和输入字段有不同的字体。也设置它。
如果没有相同的颜色（背景和字体），消除锯齿或ClearType可能会造成轻微的差异。

来源

2009-09-30 09:39:06 Kobi

在Firefox中，按钮和链接的谷歌浏览器和Safari浏览器字体看起来真的一样，但在IE（7+）和Opera不是！只要按钮的样式字体有很多问题，我决定用链接替换按钮。感谢大家的回答。 – Kate 2009-09-30 11:11:57

如果你非常关心造型，当然，一个''链接会给你比按钮更多的自由。但它不会表现完全一样...... – Kobi 2009-09-30 12:08:13

只好在Chrome同样的问题，后来想通了，关键原因是

body { 
    -webkit-font-smoothing: antialiased 
}

改变这

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

固定它。

来源

2013-06-20 23:37:12 Ish

谢谢，我有一个类似的问题（链接使用'antialiased'设置，我的''tag使用'auto'）。 – MaxGabriel 2014-07-11 01:46:29

字体大小的按钮和链接

回答

相关问题