Safari 上的模糊文本

Question

我对这个渐变色的文本感到很不舒服。

我已经经历了一些教如何将渐变应用于动态文本的教程。它有效，但 Safari 似乎无法很好地处理它。

铬渲染

Safari 渲染

两个问题：元素顶部的这一行，看起来是一个bug -webkit-background-clip: text;，但这个问题较小，因为我可以处理它。真正的问题是文字模糊，不过。

CSS

.title {
    font-weight: 700;
    font-size: 50px;
    line-height: 1em;
    text-align: right;
    color: #981d97;
    display: block;
    background-image: -webkit-linear-gradient(left ,#ffa300 0,#e31c79 50%,#981d97 100%);
    background-image: linear-gradient(to right,#ffa300 0,#e31c79 50%,#981d97 100%);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
}

我的小提琴：https : //jsfiddle.net/d3vLd4ft/1/

编辑

• 我遵循了 mcclaskiem 关于line-height从更改为的提示1em，50px因为它可能处于半像素高度。没用
• 我注意到在调整浏览器大小时字体会稍微好一点，但是一旦停止，字体就会再次变得模糊。

Answer 1

有一个技巧可以使浏览器加速图形，它使字体看起来更好：

     -webkit-transform: translate3d(0,0,1px);
        -moz-transform: translate3d(0,0,1px);
         -ms-transform: translate3d(0,0,1px);
          -o-transform: translate3d(0,0,1px);
             transform: translate3d(0,0,1px);

结果：

由此

到了这个