如何在 CSS 中设置按钮字体的样式？答案

【问题标题】：How to style a button's font in CSS?如何在 CSS 中设置按钮字体的样式？
【发布时间】：2013-08-11 20:37:45
【问题描述】：

更新：看来，我在这个问题中描述的问题只影响 OS X 浏览器。

我想在 CSS 中或多或少地更改我的输入按钮的 font 样式：

input[type="button"]
{
    font: italic bold 3em fantasy;
}

不幸的是，这在 Chrome、Safari 和 Opera 在 OS X 上 无法正常工作，除非我也更改了默认的 background-color，我不想这样做。

请看这里：http://jsfiddle.net/S7y5B/

所以我的问题很简单：如何以所有浏览器都能理解的方式更改按钮的字体而不更改背景颜色？在上面的 JsFiddle 示例中，我希望 Button 1 看起来像 Button 2，但背景颜色保持不变。如何做到这一点？

【问题讨论】：

我很难相信在没有背景颜色的情况下更改字体是行不通的。真的是这样吗？我能够在你的小提琴中改变它
这里的每个人都使用 Windows 吗？我在这里运行 OS X，这可能是问题吗？
据我了解，OSX 会更改按钮，尽管对其进行了正常的样式设置。更改边框/背景将删除 OSX 样式。
我确认，OS X 至少需要一个边框样式才能工作。
好吧，你不能......你可以像这样作弊jsfiddle.net/S7y5B/17，但到底它的目的是什么？

标签： html css browser fonts cross-browser

【解决方案1】：

在摆弄它之后，尽管对按钮进行了正常的样式设置，但似乎 OSX 会更改按钮。诸如height（即使元素设置为display:block）之类的属性，任何font 属性和padding 都不会呈现。要查看实际样式，必须对元素的 border 或 background 进行样式设置。

color 和 width 属性似乎正常渲染。

【讨论】：

不抱歉仍然不清楚...在这里jsfiddle.net/S7y5B/11 不是第一个按钮，假设是ariel font cos css inline？
@AlexGarulli 在你的例子中按钮都是黄色的。

【解决方案2】：

您的按钮看起来确实一样。

编辑 OS.X 铬：

【讨论】：

【解决方案3】：

好的，我自己想通了。我正在使用

设置按钮样式

-webkit-appearance: button;

按钮内的文本现在以预期的字体呈现，无需设置背景颜色。边框看起来仍然有些不同，但这是另一个问题。

JSsFiddle： http://jsfiddle.net/S7y5B/18/

【讨论】：