如何在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

简答:你做不到.

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

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

有一些较新的字体是平滑的,但牺牲它看起来有些模糊(例如,看看大多数Adobe的字体).不过,您还可以在Google字体中找到一些平滑但模糊的设计字体.

有一些新的CSS3技术用于字体渲染和文本效果,尽管这些技术的一致性,性能和可靠性在很大程度上变化到你通常不应该过多依赖它们的程度.

Answer 3

效果最好.如果您想在整个网站范围内使用它,而不必将此语法添加到每个类或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;

}