微信小程序使用CSS3字體

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

@font-face的語法規(guī)則：

1. @font-face {
2. font-family: <YourWebFontName>;
3. src: <source> [<format>][,<source> [<format>]]*;
4. [font-weight: <weight>];
5. [font-style: <style>];
6. }

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

可以從阿里巴巴圖標(biāo)庫（http://www.iconfont.cn/）選擇項目所需要的IconFont，并下載至本地。

解壓下載文件

iconfont.css文件中有字體轉(zhuǎn)換后的base64

1. .iconfont {
2. font-family:"iconfont" !important;
3. font-size:16px;
4. font-style:normal;
5. -webkit-font-smoothing: antialiased;
6. -moz-osx-font-smoothing: grayscale;
7. }
8.  
9. .icon-appreciate:before {
10. font-family: 'iconfont';
11. font-weight: normal;
12. font-style: normal;
13. content: "\e644";
14. }
15.  
16. .icon-check:before {
17. font-family: 'iconfont';
18. font-weight: normal;
19. font-style: normal;
20. content: "\e645";
21. }

使用IconFont

1. .icon {
2. font-family: 'iconfont';
3. font-weight: normal;
4. font-style: normal;
5. font-size: 40px;
6. color: #1AAD19
7. }
8.  
9. <view class="weui-grid">
10. <view class="weui-grid__icon"><text class="icon icon-appreciate"></text></view>
11. <view class="weui-grid__label"><text>appreciate</text></view>
12. </view>
13. <view class="weui-grid">
14. <view class="weui-grid__icon"><text class="icon icon-check"></text></view>
15. <view class="weui-grid__label"><text>check</text></view>
16. </view>

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序熱點，盡在：http://zytcm.com.cn/xiaocx/