結(jié)合線性漸變(linear-gradient)和背景截取(background-clip)實現(xiàn)漸變色的字體，這種方法適用于iconfont。

實現(xiàn)思路：

1. 盒子設(shè)置為inline-block，這樣盒子的大小就由文本量決定；
2. 盒子背景圖片使用linear-gradient設(shè)置漸變色；
3. 設(shè)置background-clip: text;使用文字區(qū)域截取背景；
4. 此時文字覆蓋在背景上方，只能看到原本純色的文字，設(shè)置文本顏色為透明：color:transparent;，就能看到底部的漸變色的文字。

參考代碼：

.gradient-font{
    font-size: 3.5rem;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    background-image: linear-gradient(to right, #7ed56f, #28b485);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.2rem;
}

這種方法適用于 iconfont。