Mac OSX和Windows中不同的CSS（字体粗细）。为什么font-weight呈现不同？

Question

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

• Windows ：

• Max OSX ：

相同的文字，相同的浏览器，但不同的操作系统。在Mac设备上，我检查了每个浏览器，包括Firefox，Opera，谷歌Chrome，Safari和网站显示相同。一旦我在Windows设备上打开网站，字体就会以“ bigish ”的方式显示，也就是说，文本显示为粗体，尽管我没有此类属性的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;

可悲的是，结果仍然相同，如下所示：

• Windows ：

• 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等网页字体。

Answer 2

清楚，这是两种不同的字体。注意“i”上方的点。注意“h”的宽度。这不是字体重量。

如果您希望看起来相同，则需要使用两个系统上都可用的字体。