html - Mac OSX 和 Windows 中的不同 CSS(字体粗细)。为什么字体粗细呈现不同？

Question

我遇到了一个问题，“font-weight”在不同的操作系统中显示不同，在我的例子中是 Windows 和 Mac OSX。这些是如何呈现字体的一些示例:

• window :

• Max OSX :

相同的文本，相同的浏览器，但不同的操作系统。在 Mac 设备上，我检查了每个浏览器，包括 Firefox、Opera、Google Chrome、Safari，并且网站显示相同。一旦我在 Windows 设备上打开该网站，字体就会以“粗体”的方式显示，也就是说，尽管我没有具有此属性的此类 CSS 代码，但文本显示为粗体。我的自定义 CSS 如下:

html,
body,
div,
applet,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
td,
input,
textarea {
  font-weight: 300 !important;
}
h1,
h2,
h5,
h6 {
  font-weight: 300 !important;
}
h3 {
  font-weight: 400 !important;
}
h4 {
  font-weight: 400 !important;
}
span,
strong,
th {
  font-weight: 500 !important;
}

这段代码工作正常，我指的是 CSS 代码被正确执行的事实。我的字体系列是 "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 如果这对您有帮助的话。经过大量研究，我尝试使用以下 CSS 代码，它帮助许多用户解决了与我类似的问题:

-webkit-font-smoothing: antialiased;

遗憾的是，结果还是一样，如下所示:

• window :

• Mac OSX:

如何在 Windows 设备上以与 Mac OSX 设备上相同的粗细显示文本？我希望 Windows 上的文本更细。

最好的问候!

Answer 1

我的猜测是，在 Windows 上，呈现的字体是 Arial，而在 Mac OS X 上，呈现的字体是 Helvetica Neue。 IIRC Windows 默认不包含 Helvetica 字体，因此它正在回退到 Arial。

但是，Arial 与 Helvetica 非常相似。我是根据大写字母 Q 的横杠做出这个猜测。如果您用大写字母 R 或 G 举了一个例子，您也许可以证实我的怀疑。

由于 Arial 没有 Helvetica 所具有的额外权重等级，因此它使用下一个最接近的权重等级进行渲染。因此，您会发现两个操作系统之间存在差异。

如果你想要一致性，我会推荐使用像 Roboto 或 Open Sans 之类的网络字体。