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

【问题标题】：Font renders thicker in browsers [closed]字体在浏览器中渲染得更厚[关闭]
【发布时间】：2015-03-28 20:13:06
【问题描述】：

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

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

【问题讨论】：

【解决方案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. */
}

【讨论】：

【解决方案3】：

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

看看fontsquirrel

【讨论】：

【解决方案4】：

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

【讨论】：