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

Question

我遇到了一个问题,其中" font-weight "在不同的操作系统中出现不同,在我的Windows和Mac OSX中.这些是如何呈现字体的一些示例:

• Windows:

• Max OSX:

相同的文本,相同的浏览器,但不同的操作系统.在Mac设备上,我检查了每个浏览器,包括Firefox,Opera,谷歌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;

可悲的是,结果仍然相同,如下所示:

• 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 这样的网络字体。