將 CSS3 線性漸變應用於跨度文本

Question

無法對使用 Lettering.js/Kern.js 緊縮的文本應用漸變。 下面是瘦身：

Lettering.js 將單詞中的每個字符分成具有升序類的單獨跨度。 從那里，您可以調整每個字母的邊距，因此“緊縮”它！

我想有兩種方法可以 go 關於它.. 使用帶有 repeat-x 的透明圖像並覆蓋它（以下稱為方法 1），或者沿着 webkit-only 道路使用 webkit-gradient 作為填充顏色（方法2）。 至少理論上來說...

兩種方法都不適合我！

方法 1- 如何將圖像僅應用於字母...而不是中間的負空間。

方法2-我在什么屬性下設置漸變來填充文本

這是我的代碼.. 謝謝！

HTML：

<header>
    <h1>LARA</h1>
</header>

CSS：

 h1 {
        font-family:FuturaStdExtraBold;
        font-size:200px;
        font-weight:normal;
        font-style:normal;
        color:#333e52;
        //Method 1
        background: url(../img/overlay_light.png) repeat-x;
        text-shadow: 0 1px 3px rgba(0,0,0,1);
        //Method 2
        //-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(27,33,44,1)), color-stop(50%, rgba(255,255,255,1)), to(rgba(27,33,44,1)));
    }

Answer 1

您只需要使用神奇的 webkit：

-webkit-background-clip: text

或使用 SVG 文本和漸變填充。 （順便說一句，如果你只做 webkit，你可以使用 CSS 字母間距，不需要用跨度把你的東西弄亂）