字体在浏览器中渲染得更厚[关闭]

Posted 2023-03-06

【中文标题】字体在浏览器中渲染得更厚[关闭]

【英文标题】：Font renders thicker in browsers [closed]

【发布时间】：2015-03-28 20:13:06

【问题描述】：

我在一个网站上使用 Open Sans 字体，但它在所有浏览器中都比在 Adob​​e Illustrator 中显得粗得多（见附图）。这是为什么，有什么办法可以让浏览器中的字体显示“更薄”吗？

注意 浏览器和 Illustrator 都在渲染 Semibold 粗体 (600)

【问题讨论】：

WRT 你的编辑：你的问题是如何让浏览器使用比 weight 600 更细的字体？

请发布您正在使用的 html 和 CSS 代码。不同程序呈现不同的字体是正常的，但这里的差异看起来太大了，仅凭这一点无法解释。

【参考方案1】：

问题在于别名。以下 css 解决方案适用于 safari、chrome 和 firefox：

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

【讨论】：

非常感谢！

任何人都可以解释为什么这样有效以及通过设置我们会失去什么？

@Matt "在像素级别上平滑字体，而不是子像素。从子像素渲染切换到深色背景上浅色文本的抗锯齿使它看起来更亮" - developer.mozilla.org/en-US/docs/Web/CSS/font-smooth跨度>

喜欢这个。干净多了。在我看来应该是默认行为

【参考方案2】：

确保您包含 Open Sans 的轻 (300) 和正常 (400) 权重，然后您可以简单地：

body 
    font-family: 'Open Sans', sans-serif;
    font-weight: 300; /* Or 400, if 300 is too light. */

【讨论】：

谢谢，请查看问题更新

@RunLoop 你使用相同的字体大小吗？您使用的是pt 单位吗？

我在这两种情况下都使用 px。

@RunLoop 你能不能简单地将浏览器中的字体粗细从 Semibold 更改为 Normal？

很遗憾，常规和半粗体的权重看起来完全不同。

【参考方案3】：

Open Sans Webfont 有 10 种样式。对我来说，看起来浏览器显示的是半粗体。它应该是正常的，你应该没问题。

看看fontsquirrel

http://www.fontsquirrel.com/fonts/open-sans

【讨论】：

我认为您的意思是“10 个重量”。只有 3 种不同的字体样式！

你是对的 - 我的意思是样式，因为所有权重都有单个样式表 :)

【参考方案4】：

简单的答案是没有解决办法。如果您正确加载和调用所需的样式和权重，那么有时 adobe 和 Web 浏览器（或浏览器到浏览器）之间的呈现方式会有所不同。您的选择是增重 400 磅或学会爱上这种大胆。