微信小程序如何使用CSS3字體

今天小編給大家分享一下微信小程序如何使用CSS3字體的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

@font-face是CSS3中的一個模塊，它主要是把自己定義的Web字體嵌入到的網頁中。

@font-face的語法規則：

@font-face {font-family: <YourWebFontName>;src: <source> [<format>][,<source> [<format>]]*;[font-weight: <weight>];[font-style: <style>];}

IconFont（圖標字體）是用字體來代替圖標、圖片文件的方法，通過IconFont可以對圖標的大小、顏色等進行控制。微信小程序的wxss文件的font-face的url不接受http地址作為參數，但可以接受base64，需將圖標字體文件轉換為base64后引用。

可以從阿里巴巴圖標庫選擇項目所需要的IconFont，并下載至本地。

解壓下載文件

iconfont.css文件中有字體轉換后的base64

.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .icon-appreciate:before {font-family: 'iconfont';font-weight: normal;font-style: normal;content: "\e644";} .icon-check:before {font-family: 'iconfont';font-weight: normal;font-style: normal;content: "\e645";}

使用IconFont

.icon {font-family: 'iconfont';font-weight: normal;font-style: normal;font-size: 40px;color: #1AAD19} <view class="weui-grid"><view class="weui-grid__icon"><text class="icon icon-appreciate"></text></view><view class="weui-grid__label"><text>appreciate</text></view></view><view class="weui-grid"><view class="weui-grid__icon"><text class="icon icon-check"></text></view><view class="weui-grid__label"><text>check</text></view></view>

以上就是“微信小程序如何使用CSS3字體”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。