Safari的模糊文字

Question

我的这段文字渐渐变色了。

我经历过一些教导如何将渐变应用于动态文本的技巧。它可以工作，但似乎Safari无法很好地处理它。

Chrome渲染

Safari渲染

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

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

结果：

从此

它转到了这个