Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

http://jsfiddle.net/gN875/

Answer 5

试试这个CSS：

＆＃13;

div {
  -webkit-text-stroke: 0.6px;
}

＆＃13;

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

＆＃13;

Answer 6

您可以尝试语法：

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

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

6 个答案: