gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:04:30 26 4
gpt4 key购买 nike

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

  • window :

enter image description here

  • Max OSX :

enter image description here

相同的文本,相同的浏览器,但不同的操作系统。在 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 :

enter image description here

  • Mac OSX:

enter image description here

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

最好的问候!

最佳答案

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

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

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

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

Arial VS Helvetica

关于html - Mac OSX 和 Windows 中的不同 CSS(字体粗细)。为什么字体粗细呈现不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35606369/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com