微信小程序使用CSS3字体

 

@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步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

有关进一步了解小程序开发，请前往：https://www.kesion.com/miniprogramdev/