不同操作系统下的CSS（Font-weight）有何差异？为什么字重会呈现不同？

Question

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

• Windows ：

• Max OSX ：

同样的文本，同样的浏览器，但不同的操作系统。在Mac设备上，我检查了包括Firefox、Opera、Google Chrome和Safari在内的所有浏览器，网站的显示方式都相同。一旦我在Windows设备上打开网站，字体就以“boldish”方式显示，也就是说，尽管没有这种属性的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上的文本更细。

最好的问候！

- Ava Barbilla

---

据我所知，在Windows中，字体重量从来没有正常工作过 - 你只能有粗体或普通体，临界点大约在500左右：https://jsfiddle.net/z33m1ug8/。如果你想使用更轻的字体，通常需要使用那种更轻的字体的@font-face版本。这是一篇关于字体重量映射的好文章：https://css-tricks.com/almanac/properties/f/font-weight/。 - Pete

@Pete，有趣的是，在这个代码片段中，我也看到了你描述的相同行为，而且在 Mac 上也是如此。 - Anupam

Answer 1

我的猜测是，在Windows上呈现的字体是Arial，而在Mac OS X上呈现的字体是Helvetica Neue。我记得Windows默认情况下不包含Helvetica字体，所以它回退到Arial。

然而，Arial和Helvetica非常相似。我根据大写字母Q的横杠做出这个猜测。如果您使用大写字母R或G的示例，可能能够确认我的怀疑。

由于Arial没有Helvetica具有的额外粗度，因此它正在使用最接近的下一个粗度级别进行渲染。因此，您会在两个操作系统之间获得差异。

如果要保持一致性，建议使用像Roboto或Open Sans之类的网络字体。

- jeffjenx

---

谢谢！@Quantastical 如果我想添加多个"@font-face[s]"，而我有几个“font-weight[s]”，我该怎么做？我目前有这个：font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/gwVJDERN2Amz39wrSoZ7FxkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2'); - Ava Barbilla

@AvaBarbilla 如果你想自己添加它们，只需查看Google在其CDN版本中所做的内容。如果你不想这样做，只需前往Google Fonts网站，在那里他们提供了一个界面来选择你想要包含的字体，然后给你一个@import语句或一个样式表<link />来包含在你的头部。 - jeffjenx

Answer 2

明显地，这是两种不同的字体。注意“i”上方的点和“h”的宽度。这与字体的粗细无关。

如果你想让东西看起来相同，需要使用在两个系统上都可用的字体。

- user3344003