logo标签列表

在Chrome浏览器中，-webkit-font-smoothing属性没有任何效果。

cssgoogle-chromefonts
13

我正在尝试使用 -webkit-font-smoothing CSS 属性来控制 Google Chrome 的（可怕的）字体反锯齿，但它对文本完全没有影响。

我正在尝试使用 -webkit-font-smoothing CSS 属性来控制 Google Chrome 的字体反锯齿，但是该属性对文本没有任何影响。 

<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>

我在Photoshop中比较了像素，三个像素完全相同。Chrome不再支持这个属性了吗？

你使用的是哪个操作系统？ - Adrift
我使用的是Windows 7操作系统。在OSX中，字体渲染似乎很好。 - Gavin
2
它们在OSX上和Chrome 31上看起来都不同。 - Rich Bradshaw
我想我必须让Windows上的Chrome用户看到可怕的像素化文本。我认为到2013年，我们至少应该解决不一致的字体渲染问题了。 - Gavin
1
实际上，Chrome长期存在字体渲染问题，无论是否启用字体平滑。请查看我在此处的答案以获取详细信息。但是，看起来很快就会有一个修复方案了，终于！ - Trevor
只是想过来感谢你在使用此属性时破坏了Windows和Linux上Chrome字体渲染。OSX的技巧不适用于其他操作系统，但Apple的狂热者们却将它们引入了其中。 - pandasauce
6个回答
16
26
好的。他们拿走了在Chrome中让字体看起来还算不错的东西。如果不能呈现字体，为什么还要进入浏览器领域呢？ - Gavin
等等，这是不是意味着 -webkit-font-smoothing: antialiased; 被取消了，而亚像素成为了标准？感谢上帝、耶稣、宙斯或任何使这成为可能的人。或者是谷歌。 - jocap
问题在于Mac的次像素抗锯齿技术会导致黑底白字的颜色变得过于粗体。关闭次像素抗锯齿是唯一的解决方法，但现在在Chrome中却无法这样做了。 - 75th Trombone
在使用OS X上的Chrome 43时，似乎不再支持亚像素抗锯齿。Firefox使用亚像素抗锯齿渲染字体，我更喜欢这种方式而不是灰度抗锯齿。 - Tor
2
这大多数情况下是不正确的，那个链接也不是完整讨论的好例子。Google Chrome团队决定在下一个版本中将font-smoothing属性放回Chrome中，因为他们没有想出更好的解决方案来纠正原始问题，也不想造成进一步的混乱。如果您在Chromium的问题跟踪器中搜索，您可以找到进一步详细描述它的讨论。 - Mike Kormendy
0

你可以尝试使用语法：

/* Keyword values */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* <length> value */
font-smooth: 2em;

尽管在CSS3字体的早期（2002）草案中出现，但font-smooth被删除，此规范不在标准跟踪中。https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
0

看起来对于某些（系统？）字体，你的测试用例之间存在差异：

body {
   font-family: "HelveticaNeue-Light";
   font-weight: 300;
}

http://jsfiddle.net/gN875/

0

尝试使用这个CSS：

div {
  -webkit-text-stroke: 0.6px;
}
<div style="font-size: 42px">
  <p style="-webkit-font-smoothing: subpixel-antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: antialiased">This is a font test.</p>
  <p style="-webkit-font-smoothing: none">This is a font test.</p>
</div>

2
这只是增加笔画宽度。根本没有解决问题。 - Daniel Bonnell
这比它看起来更有用。有些字体可能只需要稍微加粗一点，可能会让它们看起来更好，也可能不会。 - xdevs23
这实际上是非常好的建议，也是原问题的一个很好的解决方法。比起被接受的答案只是重复原帖并声明不再支持，这个建议更加有用。 - djk
0

你说得没错。 现在不支持字体平滑处理。 它已经不在新的CSS标准中了。所以，没有更多的字体平滑处理了！ 你可能想在这里查看W3C标准。 http://www.w3.org/TR/WD-font/#font-smooth

0

如果您使用的浏览器或操作系统没有字体渲染，则此方法将无法正常工作，您是否尝试过 -moz- -o-，Chrome 可以使用 -webkit-，但必须是您的浏览器。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接