为什么 Chrome 使用相同 CSS 的不同字体？答案

【问题标题】：Why does Chrome use different fonts with the same CSS?为什么 Chrome 使用相同 CSS 的不同字体？
【发布时间】：2013-01-23 17:27:50
【问题描述】：

我有一个span 和一个input 元素，它们共享相同的字体CSS 定义。为什么 Chrome 会为它们使用不同的字体？我该如何解决这个问题？

我的目标是让它们在 IE9、Chrome 和 FF 中看起来完全一样。

CSS 定义（已修复），如果它们仍然重要的话。

* {
    font-family: Verdana,Helvetica,Arial,sans-serif; /* Moving here fixed it */
}
body {
    /*font-family: Verdana,Helvetica,Arial,sans-serif; -- This caused the issue*/
    font-size: .8em;
    margin: 0;
    padding: 0;
    color: #000;
}
.button 
{
    text-align:center;
    min-width:80px;
    display:inline-block;
    white-space:nowrap;
    background-color:#4A8CF6;
    color:#FFF;
    padding:4px;
    margin:1px;
    border:0;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    font-size: .8em;
}

解决方案

问题是 span 元素继承自我的 body 的 CSS 定义，而 input 元素没有。我已经在我的 CSS 中使用 body { font-family:...; } 定义了字体，就像我的计算结果显示的那样，我认为使用 display: inline-block; 会强制它们都从 body 继承字体，但它没有。

解决方案是切换到使用* { font-family:...; } 进行字体定义。按钮和可点击类只定义了大小和颜色等。

【问题讨论】：

clickable_button 类的 CSS 定义是什么？
@TomWalters 我认为计算样式足以看到 CSS，抱歉。我根据您的回答解决、接受并添加了解决方案说明。

标签： html css google-chrome fonts

【解决方案1】：

如果您希望输入元素具有相同的字体，您必须逐字指定它们：

/* Or input[type=submit] depending on your needs */
span, input { 
    font-family: Arial, sans-serif; /* Your font here */
}

否则浏览器会使用您的问题显示的默认值。您正在查看 Computed Styles，这表明 Chrome 已为您确定了值，因为您尚未指定它们。

【讨论】：

谢谢。问题是 CSS 继承。我以为我的inline-block 定义使input 继承自body，但事实并非如此。我为问题添加了解决方案

【解决方案2】：

您应该在样式表的开头应用 CSS 重置规则。其目的是使所有元素在所有浏览器中具有相同的外观。

例子：

http://developer.yahoo.com/yui/reset/

http://meyerweb.com/eric/tools/css/reset/

也有用的相关问题：https://stackoverflow.com/questions/116754/best-css-reset

【讨论】：