微信小程序使用CSS3字体

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

@font-face的语法规则：

1. @font-face {
2. font-family: ;
3. src:[][,[]]*;
4. [font-weight: ];
5. [font-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-smootShopfang: antialiased;
6. -moz-osx-font-smootShopfang: 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.  
11. appreciate
15. check

Shopfa小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序热点，尽在：http://www.shopfa.cn/xiaocx/

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。