微信小程序中的字體圖標(biāo)使用漸變色

1、使用方法：將標(biāo)阿里云圖下載下來报腔，并將壓縮包中的字體圖標(biāo).css文件中的代碼拷貝到小程序中的wxss中，建議放在自己代碼的最后剖淀，方便管理纯蛾。css文件太大，還是不建議使用纵隔，選擇將圖片放在后臺(tái)服務(wù)器翻诉，然后去請(qǐng)求要方便得多。

2捌刮、添加漸變色需要三條代碼即可搞定碰煌，同css3一致（畢竟都是相互模仿），代碼如下：
（1）绅作、通過CSS3實(shí)現(xiàn)背景色漸變效果芦圾。這里是從左下角至右上角的線性漸變。

background: -webkit-linear-gradient(left bottom, #fb2c61 , #fac362);

（2）俄认、規(guī)定背景的繪制區(qū)域?yàn)槲淖植糠指錾佟Ｖ敖佑|過的background-clip有下面幾種取值：background-clip: border-box（默認(rèn)）｜padding-box｜c(diǎn)ontent-box;意思分別是洪乍，背景被裁剪到邊框盒 | 背景被裁剪到內(nèi)邊距框｜背景被裁剪到內(nèi)容框。

-webkit-background-clip: text;

（3）夜焦、文字填充顏色壳澳。
＊這里注意一定要定義為transparent，否則會(huì)覆蓋底部的背景色茫经。
這里使用了-webkit-前綴巷波，Chrome和Safari能夠正常使用，經(jīng)測試新版firefox也能正常使用卸伞。所以抹镊，如果有兼容性需求，這種方式就要謹(jǐn)慎使用了瞪慧。

-webkit-text-fill-color: transparent;

3髓考、上效果圖片，如下圖：

image.png

4弃酌、上所有代碼：布局是rem彈性布局氨菇，可參考（不足的地方還望大佬些指教）
wxml代碼：

<!--pages/caseQuery/caseQuery.wxml-->
<view class='header'></view>
<view class='contain' style='height:{{winHeight*360/1206}}rpx'>

  <view class='commonStyle' >
    <!-- 住宅 -->
    <view class='boxStyle 'style='height:{{winHeight*350/1206}}rpx'>
      <view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='residenceEvent'>
        <view class='iconfontResidence icon-residence smallIcon'></view>
        <view class='font'>住宅</view>
      </view>
    </view>
    <!-- 商鋪 -->
    <view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
      <view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='shopeEvent'>
        <view class='iconfontShope icon-shope smallIcon'></view>
        <view class='font'>商鋪</view>
      </view>
    </view>
  </view>
  <!-- 工業(yè)用地 -->
  <view class='commonStyle'>
    <view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
      <view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='industryEvent'>
        <view class='iconfontIndustry icon-industry smallIcon'></view>
        <view class='font'>工業(yè)用地</view>
      </view>
    </view>
    <!-- 土地 -->
    <view class='boxStyle' style='height:{{winHeight*350/1206}}rpx'>
      <view class='blockStyle' style='height:{{winHeight*300/1206}}rpx' bindtap='landEvent'>
        <view class='iconfontLand icon-land smallIcon'></view>
        <view class='font'>土地</view>
      </view>
    </view>
  </view>
  
</view>
<view class='footer'></view>

wxss代碼

/* pages/caseQuery/caseQuery.wxss */
page {
  background-color:#f9f9f9;
}
.contain {
  margin-top:27%;
}
.commonStyle {
  display:flex;
  margin-top:2%;
  
}
.boxStyle {
  flex:1;
  height:350rpx;
  /* 彈性居中 */
  display: flex;
  justify-content:center;/*水平居中*/
  align-items:center;/*垂直居中*/
  
}
.blockStyle {
  width:80%;
  box-shadow: 0 10rpx 100rpx #ccc;
  display:flex;
  flex-direction: column;
  cursor: pointer;
}
.smallIcon {
  flex:2;
  /* 彈性居中 */
  display: flex;
  justify-content:center;/*水平居中*/
  align-items:flex-end;/*垂直居中*/
}
.font {
  flex:1;
  text-align:center;
}






/* 住宅圖 */
@font-face {font-family: "iconfontResidence";
  src: url('iconfont.eot?t=1567585609389'); /* IE9 */
  src: url('iconfont.eot?t=1567585609389#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALIAAsAAAAABnQAAAJ7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp8gQcBNgIkAwgLBgAEIAWEbQcxG64FyC4xFRnprgQSy24cN8JrNX2Xg3fCLx/i4fu113Pfvv3ZAJOLZ01UdFEVplG1REZ0KgyBkRWGZcf/o7U2J+8JPG4Cf4uI+8nsie8tmjw0QnuSpwIhQmh4/hcONKi3e71+krLE1AYdLZUKINTnuZzeBDqQu+oD5bgXjTVpUi/AOKBA98A2WQEFFnnD2AUv8DSBJmM6CDtjMyuQltmTAnHHMhRIF4KyzDKVUGtYmcUzCVW6n16Bp9Hn459ypEnKgl2zfzmqw8DPnJzO6+ewExBCIKD1JQqsAJk4bkzukgTjJE1J2RQ4VmXwMwKHOKpVsL/OLm8BI1D2THJP8ajfTCCjxCSwOulBlO25lvPdrHSpi9kHrxuhKi7esFax5TbmqJ5bzYlN19Hj1mhKbI3ODE9vpxqkVPTnZ/euPn7n7O6/P5V7uPXV20X/dwwA1Ev/TYGA4Mltlf32nqtcBj9uMvLXyzDMDar9uoL/Ix/YkQ2lbU9Zkzdmk0mJ89Y1aUId9nb5mGrqvZlsqPTekrvBaIZCZYbM7ApKzdZQU1lHk2Xj65t1YySRG7HkBiB0eEHS5isKHd7IzL6j1OcTNR0hoclp1OzYbC6s7DBDhaNO1FNiaYFPXSfPxpVLaBy6CssrI34NWWxFSClfLGfG0Ue2xJz4yChzTgllgUfGwHnougEJWWCjxvMm52FXoUCbXpTXAg+ytjFIwSEdoTpFWDQBHw16c9nK+5cgwyGXgnW01aXXICZmDU6U5BUHkOM6f1Dbo1wSO2Io4ziKoJiAhxgDw5DLFSDC5mE2pOHyzAnxUJeC040O1eW3N3h/tw+a2OYUTk6h4co8dAOKBQAAAA==') format('woff2'),
  url('iconfont.woff?t=1567585609389') format('woff'),
  url('iconfont.ttf?t=1567585609389') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1567585609389#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfontResidence {
  font-family: "iconfontResidence" !important;
  font-size: 120rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-residence:before {
  content: "\e62d";
  background: -webkit-linear-gradient(left bottom, #fb2c61 , #f79d29);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 商鋪 */
@font-face {font-family: "iconfontShope";
  src: url('iconfont.eot?t=1567585663653'); /* IE9 */
  src: url('iconfont.eot?t=1567585663653#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKoAAsAAAAABlAAAAJbAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApYbQE2AiQDCAsGAAQgBYRtBzEblAUR1Ytnsq+TN8V20mMjFAQTbivGSbjZ3+JmGw6tOlidLWdHfFTZz0QQjf1v9m6/uNMgiVozTVSyJiiNSIiERBWNYiG/o3MftWjCahpwlP4LbYSHOqQtTpfhqFFBmD3HFHx/fU/anZuGl22WzA0Q7V0PNuDw1TNZcAAc7WqpDACf53J6E+hA7qoPlNPeNNbko16A8dbA9sQosiKJvGHsghf4mEC7aZvE/vn4eUqyVwXioblzjSpEpWSFVqG54WCKV7jW8qIMvIy+H3+VoSiaKrvl9O0DN00/OCX0bfQICDEkoONNqNiEJM43Zk+ignFV+2lmHikFP/zHHnFUp2B/nV3fCSah6pnUnuZR6wtIOD6C6UmXkdmd8ThEfVeSLVzAKT0VXtBRr7q4y9aBzaHeuxmSsmAq01m9rq31FkZ/6EM7CI3q+zpPIHgN3kG3OxJ82kPDjdIwP6278gW/RD2wLQ2tbS3HViFfMZILK0AFD2hgB/t9n2obOn8xtBq6C3+LqQxVq0Uy2U1o0mELmrXahXYbDh3vMOARKrIN654AhF5vUHR7i6rXOzLZb2gy7D+a9QZFu4uRXNhhOTijYNJCDs0fGzuN3vWKihtvFN695rw24l/EsUlgkeblwpVG4iW2xE8oRTx6nga8gOeo7yeceWrJSlqLzFWW+aY3pXYaQAFMWsih+WNjp9EH3UVVPn+j8O41d4jq8i/i2EyORZoPIK+mcZDoUV6Jn1CKePQ8DXgB86jvJ5yb57VkJa0npOcqczr5oaZ0e8vwd3sAUGDbV4kzs1Ks9RjmNwAAAAA=') format('woff2'),
  url('iconfont.woff?t=1567585663653') format('woff'),
  url('iconfont.ttf?t=1567585663653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1567585663653#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfontShope {
  font-family: "iconfontShope" !important;
  font-size: 120rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shope:before {
  content: "\e62d";
  background: -webkit-linear-gradient(left bottom, #17cdb7 , #f9da85);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 工業(yè)用地 */
@font-face {font-family: "iconfontIndustry";
  src: url('iconfont.eot?t=1567585713079'); /* IE9 */
  src: url('iconfont.eot?t=1567585713079#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALAAAsAAAAACCgAAAJyAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEHINsATYCJAMICwYABCAFhG0HRhsoBxHVkwVkXyTwnHR2B20SNT+HiplwGynB87mGvZ9kt1kooEJUnUogUO0RKyDVHAApUsBCsWSULE9vAgSQBUBxDPl92yJT0oSERV6HftZX/ho+DHZGHJNX4MN8XzhGpUVTNa15N0qggXbgaCQlPvPhjDeMXXkRlyFASKF60tUzNIXFYMwSQNatXrkYm9JjauIFi+CXbDTIMTys2q+eAEf998sfGrKg8DRG0tiK7mW0/TxvsmuXOGa1QzCeFWDbQAP1wIBMldpH0GGwniZUgoZSrCte4Of5JHH5q/3jgYD4GLExAPmQf04CW3iq1ygADJAGvAG+IYppT4szjA/TbtCX3/XEj98U+9l6q7sShgeuiWy/HkUHryLpb57ru3hbKBdeH3xZMJ94fX1jbsx51HPcb+RHWmZam91Kh3/63nznOTm6+P4POz0xbW99AwLt09dmFqY3/bfR1XZ9PH3mrj8lcQbtAPsmHAJ/VNCywqgiw6CMLCiNKt6Q9qbyQkIgAbuzfOvrzEVsFSwXQChSKIDGUk4wlHp4RDTCx9KKkDq92yOyrUcjJgBq7QYQMtyGIo170GR4SjCUr/DI8w8+GWmEzEj2gRGV2TG8HkpgST8UzTI7yyR5EP+CP0bFSZFP+4H36KG6qLKRHjN4jCX76RsRR46XiTpwHcZxoZWXBCNFEFnbsnRldyrMMmU5GUpgiX5INMvs3M6S517/gj9GxTVlFd4feI+jk1qhakHo5XOrsmu5ZT99Q8QRx8tEOmDFaAYXspaPSzBSCD38a6tEtVxbeTG/cnq6Q0CIoVFiLtVYzReiX2b/4HGpNv6RlqL6h5hlAAA=') format('woff2'),
  url('iconfont.woff?t=1567585713079') format('woff'),
  url('iconfont.ttf?t=1567585713079') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1567585713079#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfontIndustry {
  font-family: "iconfontIndustry" !important;
  font-size: 120rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-industry:before {
  content: "\e899";
  background: -webkit-linear-gradient(left bottom, #516fd6 , #8194d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 土地 */
@font-face {font-family: "iconfontLand";
  src: url('iconfont.eot?t=1567585744539'); /* IE9 */
  src: url('iconfont.eot?t=1567585744539#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAABxAAAAMBAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCHIIDATYCJAMICwYABCAFhG0HLhsnBsgekiRFUAR7ECkRrYISFg8P+/s692kELiJciQyhEi1uhuo2KeSdP2+dfRZyltCtSqZTpS9N11fz07pBgA04IIw040VnyIDL6U/x/+qAchlz2di08THAOKBAx5xkBRQYxw1jF7zA9QQq9Qqjs66grA4Yy9jdAnGU54TAuOCUdRSHcqFoGJu9ijG58uRW8hbwIPp8/BMT5STylF22aX++BGT9DHE66N0saV96z6Pl/GCTSDENyIhtjcEN9JL0ND2VelrfIHCs4uDn5P8C5WF/eARRsAurQTdUPpPKUz/qNxOQocAWwIVJd6Gorm10sowrt19su/Vrx53nO+++vbjtduLeu65r7hSs2dV8SVg4IH7t1dDZpZ0b7pTMrGqeOrRv9d62o3djZxe0Hmn/Z0G3bvXPzbecv3361u2de+9GLriTMGO/6lZds8+IzmW99f0Fmx2jl3ulMr0fn0/th5utBhYmLMu4+2X+plzXiqA+mOqb+OtFbafJ101iwVGwcPGU7+bsqJVx+NFIquWA++MEUet4sX/r882RjTtzC3ME0o+rHj8dWBqLIhr5+2X5+v93YNx1R8qrHavL9xRUlIMsQGkhkj9L7/3v7dRt/fMWq2Vfy6sy8OnZzMdIOyxM+V2Fgr9rzx93EH+1hsZOJRmQEuUTWxjetQzKeUSJHW30ZKq15VXyoVzLC4XL9GRIlRsmM3YauSpLUSi3EpWmFE6u0oTSE1kFJnUDhHpbkaj1Eql6l8mMfYxcq7co1EeKSjuiac4qo3HIdC1FQoYkUNQOeTFRYdfDTOPiGsRpFUKa10RcA6IaPgajI6LKuUKkQnSJAZoWLoYxDDElSlgANkMKBYFqSmRIzCKkjKlTIiNx04sixEQJTK1FIUIMIgGJtIN4YoQKDuozppX310A4WgpCtENQl26AUBp881C0CFEDyEKjapDgUS7RaMGJwTAYhFGEElQA/IjCSROQurmVDCLGRJBOSKqliES18FBjxPZm5d9tgEq2LQmnOpWd1Up4AAAAAAA=') format('woff2'),
  url('iconfont.woff?t=1567585744539') format('woff'),
  url('iconfont.ttf?t=1567585744539') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1567585744539#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfontLand {
  font-family: "iconfontLand" !important;
  font-size: 115rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-land:before {
  content: "\e62a";
  background: -webkit-linear-gradient(left bottom, #516fd6 , #07c9d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

js代碼：

// pages/caseQuery/caseQuery.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;

        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

})

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市妓湘，隨后出現(xiàn)的幾起案子查蓉，更是在濱河造成了極大的恐慌，老刑警劉巖榜贴，帶你破解...
沈念sama閱讀 207,113評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件豌研，死亡現(xiàn)場離奇詭異，居然都是意外死亡唬党，警方通過查閱死者的電腦和手機(jī)鹃共，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,644評(píng)論 2贊 381
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來驶拱，“玉大人霜浴，你說我怎么就攤上這事±陡伲” “怎么了阴孟？”我有些...
開封第一講書人閱讀 153,340評(píng)論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長税迷。經(jīng)常有香客問我永丝，道長，這世上最難降的妖魔是什么箭养？我笑而不...
開封第一講書人閱讀 55,449評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任慕嚷，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘闯冷。我一直安慰自己砂心，他們只是感情好懈词，可當(dāng)我...
茶點(diǎn)故事閱讀 64,445評(píng)論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布蛇耀。她就那樣靜靜地躺著，像睡著了一般坎弯。火紅的嫁衣襯著肌膚如雪纺涤。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,166評(píng)論 1贊 284
城市分裂傳說
那天抠忘，我揣著相機(jī)與錄音撩炊，去河邊找鬼。笑死崎脉，一個(gè)胖子當(dāng)著我的面吹牛拧咳，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播囚灼，決...
沈念sama閱讀 38,442評(píng)論 3贊 401
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼骆膝，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了灶体？” 一聲冷哼從身側(cè)響起阅签，我...
開封第一講書人閱讀 37,105評(píng)論 0贊 261
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蝎抽，沒想到半個(gè)月后政钟，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,601評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡樟结，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,066評(píng)論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年养交，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓢宦。...
茶點(diǎn)故事閱讀 38,161評(píng)論 1贊 334
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡碎连，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出刁笙，到底是詐尸還是另有隱情破花，我是刑警寧澤，帶...
沈念sama閱讀 33,792評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布疲吸，位于F島的核電站座每，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏摘悴。R本人自食惡果不足惜峭梳，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,351評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧葱椭，春花似錦捂寿、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,352評(píng)論 0贊 19
一樁弒父案秦陋，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至治笨，卻和暖如春驳概，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背旷赖。一陣腳步聲響...
開封第一講書人閱讀 31,584評(píng)論 1贊 261
情欲美人皮
我被黑心中介騙來泰國打工顺又，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人等孵。一個(gè)月前我還...
沈念sama閱讀 45,618評(píng)論 2贊 355
代替公主和親
正文我出身青樓稚照，卻偏偏與公主長得像，于是被迫代替她去往敵國和親俯萌。傳聞我的和親對(duì)象是個(gè)殘疾皇子果录，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,916評(píng)論 2贊 344

微信小程序中的字體圖標(biāo)使用漸變色

推薦閱讀更多精彩內(nèi)容