为什么在本网站的Chrome中未正确应用字体样式粗体

时间:2016-06-13 15:00:24

标签: html google-chrome fonts google-webfonts

我遇到的问题是未正确应用字体样式。似乎浏览器只是自己使字体变粗,导致一个丑陋的人造粗体。

在Firefox中一切正常。问题只出在google chrome。

以下是演示的链接: http://www.webagenturcms.ch/view/testbootstrapflo.ch/de/Home

字体已全部加载但无法正常工作。我错过了什么?

Screenshot in Chrome on Mac

[Windows上的Chrome屏幕截图] [2] 链接2作为评论......

2 个答案:

答案 0 :(得分:2)

正如我最近注意到的那样,2016年的问题在2020年仍然存在。因此,我认为回答这个老问题仍然可以。

解决方案是为MacOS上基于Webkit的浏览器定义特殊的CSS属性。请在您的body标签中插入以下CSS:

-webkit-font-smoothing: antialiased;

这会更改Safari和Chrome中MacOS上的字体外观,就像MacOS中的Firefox和Windows中的Chrome。作为副作用,普通字体将显示得更细一些。

顺便说一句,apple.com的网站也使用此CSS设置。

此处详细介绍了背景:https://www.uv.mx/personal/gvera/stop-fonts-looking-bold-on-mac-browsers/

解决方案的摘要: “ Mac使用亚像素渲染来提高显示器的表观分辨率,这有助于呈现更清晰,更清晰的文本。这就是为什么即使未设置文本也显得较粗体的原因。因此,在Safari和Chrome浏览器中,您可以关闭亚像素渲染而是使用标准的抗锯齿技术使字体看起来更平滑。”

答案 1 :(得分:0)

我可能已找到解决方案: https://bugs.chromium.org/p/chromium/issues/detail?id=31833

Chrome浏览器中似乎存在@ font-face的错误。