Safari 中的模糊文本

Question

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

我看过一些教如何将渐变应用于动态文本的教程。它可以工作，但 Safari 似乎不能很好地处理它。

Chrome渲染

Safari 渲染

两个问题：元素顶部的这一行，看起来像是 -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;
}

我的fiddle：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);

结果：

由此

转到这个

Safari 中的模糊文本

Blurry text at Safari

css

safari

linear-gradients

Chrome渲染

Safari 渲染

编辑

结果：