@font-face是CSS3中的一个模？？？？，，它主要是把自己界说的Web字体嵌入到的网页中。。

@font-face的语规则则：

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

IconFont（图标字体）是用字体来取代图标、图片文件的要领，，通过IconFont可以对图标的巨细、颜色等举行控制。。微信小程序的wxss文件的font-face的url不接受http地点作为参数，，但可以接受base64，，需将图标字体文件转换为base64后引用。。

可以从阿里巴巴图标库（http://www.iconfont.cn/）选择项目所需要的IconFont，，并下载至外地。。

解压下载文件

iconfont.css文件中有字体转换后的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>

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。通过拖拽、拼接模？？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。

有关进一步相识小程序开发，，请前往：/miniprogramdev/