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

Question

我们如何在 CSS 中应用类似 Photoshop 的字体抗锯齿功能，例如清晰、锐利、强烈、平滑？

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

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

Answer 2

效果最好。如果您想在整个站点范围内使用它，而不必将此语法添加到每个类或 ID，请将以下 CSS 添加到您的 css 正文中：

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;

}

Answer 3

简短的回答：你不能。

CSS 没有影响浏览器中字体呈现的技术；只有系统可以做到这一点。

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

有一些较新的字体很流畅，但牺牲了它看起来有些模糊（例如，看看 Adob​​e 的大多数字体）。不过，您也可以在Google Fonts找到一些设计流畅但设计模糊的字体。

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