如何在CSS中应用字体抗锯齿效果？

Question

如何在CSS中应用类似于Photoshop的字体抗锯齿效果，如清晰、锐利、强烈、平滑？

所有浏览器都支持这些效果吗？

- Mehar

---

我认为你的问题应该是“是否可以在样式表中应用Photoshop字体效果？” - Diogo Moreira

很遗憾，阅读这篇文章：https://dev59.com/BG025IYBdhLWcg3wwo6m - Joe_G

Answer 1

给您，先生 :-)

1

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

2

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

- Gildas.Tambo

---

所有浏览器都支持吗？不，这种标记只被Webkit（Chrome和Safari）支持。 - alias51

不再支持-webkit-text-shadow，只需改用text-shadow即可。 - Romainpetit

Answer 2

简短回答：你做不到。

CSS没有影响浏览器中字体呈现的技术；只有系统可以实现。

显然，文本锐度可以通过像素密集的屏幕轻松实现，但如果您使用普通PC，则难以实现。

一些较新的字体平滑，但牺牲了它的清晰度（例如Adobe的大多数字体）。您还可以在Google Fonts中找到一些平滑但模糊的设计字体。

虽然有一些新的CSS3技术用于字体渲染和文本效果，但这些技术的一致性、性能和可靠性差异如此之大，以至于您通常不应过多依赖它们。

- Jace Cotton

---

-webkit-font-smoothing 怎么处理？ - Jasper

@Jasper 这只适用于 -webkit-（即 Safari）。Chrome 和 Opera 现在已经放弃了供应商前缀，如果不通过 no-vendor 支持（例如没有 -webkit- 的 font-smoothing），则不支持该功能。使用字体平滑是非常不可靠且一直不一致的。 - Jace Cotton

想知道为什么这个被踩了。如果您这样做，请启发我。其他答案要么不起作用，要么不受所有浏览器支持。 - Jace Cotton

我正在给它点踩，因为将那些CSS添加到我的网站中使我的图标字体呈现效果更好，这与你的简短回答相矛盾。 - Jonathan

@Jonathan，你不应该点踩，因为他实际上是在回答真正的问题。OP非常明确地要求适用于所有浏览器，这不是一个标准化的功能。 - EJTH

Answer 3

效果最佳。如果您想在整个网站上使用它，而不必为每个类或ID添加此语法，请将以下CSS添加到您的css body中：

body { 
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: url('./images/background.png');
    text-align: left;
    margin: auto;

}

- user3267537

---

body {text-shadow:1px 1px 1px rgba(0,0,0,0.004) !important;} 对我很有效。谢谢！ - Aakash

更新了！在 Webkit 和 Moz 中都可以工作！ - Joe Kdw