文字显示不同答案

【问题标题】：Text Display Different文字显示不同
【发布时间】：2013-08-07 11:33:11
【问题描述】：

我遇到的问题是，一段文本在 Windows 上看起来“更粗”，而在 Mac 上却如此。

如何让它显示相同？

两种浏览器都是 Chrome 并且它只发生在 Chrome 中。

CSS：

#featured-slider .slide-content header h1 a, #featured-slider .slide-content footer h1 a {
color: #fff;
font-size: 20px;
font-family:'Open Sans', arial, sans-serif;
-webkit-font-smoothing: antialiased;
}

苹果机：

Windows：

【问题讨论】：

您应该明确设置 Open Sans 的字体粗细。 css-tricks.com/watch-your-font-weight
信息不足：缺少 HTML 标记，缺少@font-face 规则，缺少有关字体来源的信息（可能是 Google 网络字体，但如何处理？）。屏幕截图可能以不同的方式缩放。猜测：font-weight: bold 有效，但字体未声明为粗体，因此某些浏览器可能会应用算法粗体。

标签： css windows macos google-chrome

【解决方案1】：

尝试使用这样的简写属性：

font: normal 20px 'Open Sans', arial, sans-serif !important;

【讨论】：

这里使用 normal 会覆盖 h1 元素的默认粗体。不确定这就是提问者想要做的。

【解决方案2】：

您设置 css 的方式，如果第一个选项不可用，它将默认为不同的字体。从图片上看不出来是不是这样。

也可能是“font-weight”属性的变化。

看看添加这个是否能解决问题：

font-weight:normal;

或：

font-weight:400;

【讨论】：