微信小程序中的字体图标使用渐变色

2024-07-10 19:06| 来源: 网络整理| 查看: 265

1、使用方法：将标阿里云图下载下来，并将压缩包中的字体图标.css文件中的代码拷贝到小程序中的wxss中，建议放在自己代码的最后，方便管理。css文件太大，还是不建议使用，选择将图片放在后台服务器，然后去请求要方便得多。

2、添加渐变色需要三条代码即可搞定，同css3一致（毕竟都是相互模仿），代码如下：（1）、通过CSS3实现背景色渐变效果。这里是从左下角至右上角的线性渐变。

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

（2）、规定背景的绘制区域为文字部分。之前接触过的background-clip有下面几种取值：background-clip: border-box（默认）｜padding-box｜content-box;意思分别是，背景被裁剪到边框盒 | 背景被裁剪到内边距框｜背景被裁剪到内容框。

-webkit-background-clip: text;

（3）、文字填充颜色。＊这里注意一定要定义为transparent，否则会覆盖底部的背景色。这里使用了-webkit-前缀，Chrome和Safari能够正常使用，经测试新版firefox也能正常使用。所以，如果有兼容性需求，这种方式就要谨慎使用了。

-webkit-text-fill-color: transparent;

3、上效果图片，如下图：

image.png image.png

4、上所有代码：布局是rem弹性布局，可参考（不足的地方还望大佬些指教） wxml代码：

住宅商铺工业用地土地

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;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; } /* 工业用地 */ @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({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ 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 }); } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, })

【本文地址】

公司简介

联系我们