Mac OSX 和 Windows 中的不同 CSS（字体粗细）。为啥字体粗细呈现不同？

Posted 2023-03-06

【中文标题】Mac OSX 和 Windows 中的不同 CSS（字体粗细）。为啥字体粗细呈现不同？

【英文标题】：Different CSS (Font-weight) in Mac OSX and Windows. Why does the font-weight render differently?Mac OSX 和 Windows 中的不同 CSS（字体粗细）。为什么字体粗细呈现不同？

【发布时间】：2016-06-06 23:48:10

【问题描述】：

我遇到了一个问题，其中“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 上的文字更细。

最好的问候！！

【问题讨论】：

据我所知，字体粗细在 Windows 中从来没有正常工作过——你要么是粗体，要么是正常，临界点在 500 左右：jsfiddle.net/z33m1ug8。如果您想使用较浅的字体，通常必须使用该较浅字体的@font-face 版本。这是一篇关于如何映射字体权重的好文章：css-tricks.com/almanac/properties/f/font-weight

@Pete，有趣的是，在小提琴中，我在 Mac 上也看到了与您描述的相同的行为。

【参考方案1】：

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

如果您希望外观相同，则需要使用两种系统都可用的字体。

【参考方案2】：

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

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

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

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

【讨论】：

谢谢！！ @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(fonts.gstatic.com/s/roboto/v15/…) format('woff2');

@AvaBarbilla 如果您想自己添加它们，只需查看 Google 在 their CDN version 中所做的事情。如果您不想这样做，只需访问 Google Fonts 网站，他们提供的界面用于选择您想要包含的字体，然后给您一个 @import 声明或样式表 <link /> 以包含在你的标题。