问题 -webkit-font-smoothing属性在Chrome中无效


我正在尝试使用。控制谷歌Chrome(可怕的)字体抗锯齿 -webkit-font-smoothing CSS属性,但它对文本完全没有影响。

<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>

2871
2017-09-13 12:53


起源

您使用的是哪种操作系统? - Adrift
我在Windows 7上。字体渲​​染似乎在OSX中很好。 - Gavin
它们在OSX,Chrome 31上看起来都不一样。 - Rich Bradshaw
我想我必须让Windows上的Chrome用户看到可怕的像素化文字。我想到2013年我们至少会遇到不一致的字体渲染问题。 - Gavin
实际上,无论字体平滑如何,Chrome都会长时间出现字体渲染问题。看看我的 回答这里 详情。但最终看起来很快就会出现修复! - Trevor


答案:


https://productforums.google.com/forum/?fromgroups=#!topic/chrome/0vqp1bnkaoE

-webkit-font-smoothing不再有效。谷歌Chrome团队故意改变了这种行为。在以前的版本中,OSX上似乎没有“正确”应用font-smoothing。


14
2017-09-13 12:59



大。他们带走了一件可以让Chrome字体显得中等的东西。如果无法渲染字体,为什么还要进入浏览器领域呢? - Gavin
等等,这是否意味着-webkit-font-smoothing:antialiased;已经消失,亚像素是标准?感谢上帝,耶稣,宙斯或任何使这成为可能的人。或谷歌。 - jocap
问题是Mac的亚像素抗锯齿导致深色背景上的浅色字体变得过于大胆。关闭子像素抗锯齿是解决它的唯一方法。现在你不能在Chrome中。 - 75th Trombone
在OS X上使用chrome 43,它似乎根本不支持亚像素抗锯齿。 Firefox使用子像素抗锯齿很好地渲染字体,我更喜欢使用灰度抗锯齿。 - Tor
这大多不正确,链接不是完整讨论的好例子。谷歌Chrome团队决定在下一版本中将字体平滑属性重新设置为chrome,因为他们没有提出更好的解决方案来纠正原始问题,并且不想再造成混淆。如果您搜索Chromium的问题跟踪器,您可以找到更详细地描述它的讨论。 - Mike Kormendy


你是对的。 现在不支持字体平滑。 它不是新的CSS标准。所以,没有更多的字体平滑。! 你可能想在这里看到w3c标准。 http://www.w3.org/TR/WD-font/#font-smooth


0
2017-09-13 13:10





如果您使用的浏览器或操作系统没有字体渲染而不起作用,请尝试过 -moz-  -o-,Chrome可以使用 -webkit- 它必须是你的浏览器。


0
2017-09-13 13:16





对于某些(系统?)字体,似乎您的测试用例之间存在差异:

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

http://jsfiddle.net/gN875/ 


0
2018-02-12 23:47





试试这个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>


0
2017-11-12 01:51



所有这一切都会提高笔画宽度。根本没有解决问题 - ACIDSTEALTH
这比看起来更有用。有些字体可能只需要一点点“更大胆”,可能会也可能不会使它们看起来更好。 - xdevs23


你可以试试 句法:

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

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

尽管存在于CSS3字体的早期(2002年)草案中,但字体平滑被删除,并且该规范不在标准轨道上。 https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth


0
2018-02-27 20:00