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

Posted 2023-03-15

【中文标题】-webkit-font-smoothing 属性在 Chrome 中无效

【英文标题】：-webkit-font-smoothing property has no effect in Chrome

【发布时间】：2013-09-18 04:07:16

【问题描述】：

我正在尝试使用-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 不再支持此属性了吗？

【问题讨论】：

您使用的是哪个操作系统？

我在 Windows 7 上。字体渲​​染在 OSX 中似乎很好。

它们在 OSX、Chrome 31 上看起来都不同。

我想我必须让 Windows 上的 Chrome 用户看到可怕的像素化文本。我认为到 2013 年我们至少会解决不一致的字体渲染问题。

其实Chrome长期以来一直存在字体渲染问题，不管字体是否平滑。查看我的answer here 了解详情。但很快就会有一个修复，看起来，终于！

【参考方案1】：

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

-webkit-font-smoothing 不再起作用。谷歌浏览器团队有意改变了这种行为。在以前的版本中，似乎没有在 OSX 上“正确”应用字体平滑。

【讨论】：

太棒了。他们拿走了一件能让字体在 Chrome 中看起来不错的东西。如果无法渲染字体，为什么还要进入浏览器领域。

等等，这是否意味着 -webkit-font-smoothing: antialiased;消失了，亚像素是标准吗？感谢上帝、耶稣、宙斯或任何使这成为可能的人。或谷歌。

问题是 Mac 的亚像素抗锯齿导致深色背景上的浅色字体过于粗暴。关闭亚像素抗锯齿是修复它的唯一方法。现在你不能在 Chrome 中了。

在 OS X 上使用 chrome 43，它似乎不再支持亚像素抗锯齿。 Firefox 使用亚像素抗锯齿很好地呈现字体，我更喜欢灰度抗锯齿。

这大多是不正确的，并且该链接不是完整讨论的好例子。 Google Chrome 团队决定在下一个版本中将字体平滑属性放回 chrome，因为他们没有提出更好的解决方案来纠正原始问题并且不想造成进一步的混乱。如果您搜索 Chromium 的问题跟踪器，您可以找到更详细地描述它的讨论。

【参考方案2】：

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

【参考方案3】：

如果您使用的浏览器或操作系统没有字体渲染，那么这将不起作用，您是否尝试过-moz--o-，Chrome 可以在-webkit- 上运行，它必须是您的浏览器。

【参考方案4】：

似乎对于某些（系统？）字体，您的测试用例之间存在差异：

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

http://jsfiddle.net/gN875/

【参考方案5】：

你可以试试语法：

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

【参考方案6】：

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

【讨论】：

所有这些都是增加笔画宽度。根本解决不了问题

这比看起来更有用。有些字体可能只需要稍微“粗一点”，可能会或可能不会让它们看起来更好。