在浏览器中，字体渲染会变得更加粗。

Question

17

我在一个网站上使用了Open Sans字体，但在所有浏览器中它的粗细程度比Adobe Illustrator中的要大得多（请参见附图）。这是为什么？是否有任何方法可以让浏览器中的字体显示更“纤细”？

Illustrator

Browser

注意：浏览器和Illustrator都渲染了半粗体（600）。

- RunLoop

关于您的编辑：您的问题是如何使浏览器使用比重量为600更轻的字体？ - Mr Lister

1

请发布您正在使用的HTML和CSS代码。不同程序呈现字体有所不同是很正常的，但这里的差异看起来太大了，仅仅通过这个原因无法解释。 - Jukka K. Korpela

4个回答

4

请确保在使用Open Sans字体时包含了300和400两种常规字重，然后您可以简单地：

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

- James Donnelly

谢谢，请查看问题的更新。 - RunLoop

@RunLoop 你使用的字体大小一样吗？你使用的是 pt 单位吗？ - James Donnelly

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

@RunLoop，你不能直接在浏览器中将字体粗细从Semibold更改为Normal吗？ - James Donnelly

@FredericLeitenberger 很好地发现了。 - James Donnelly

显示剩余2条评论

0

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

看看fontsquirrel

- moeses

我想你的意思是“10个字重”。只有3种不同的字体样式！ - Mr Lister

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

-1

简单的答案是没有固定的解决方法。如果您正确加载和调用所需的样式和字重，那么有时在Adobe和Web浏览器（或浏览器之间）之间呈现的方式可能会有所不同。您的选择是使用400字重或学会喜欢粗体字。

- JustH

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RunLoop · Accepted Answer

问题出在别名上。下面的CSS解决方案可适用于Safari、Chrome和Firefox：

问题是由于别名引起的。以下CSS解决方案可在Safari、Chrome和Firefox中使用：

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