微信小程序使用CSS3字体

发布：2018-02-02 09:53浏览：次来源：网络作者：cola

@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后引用。

可以从阿里巴巴图标库（https://www.iconfont.cn/）选择项目所需要的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>

参考资料

w3school 在线教程 CSS3 教程 | 菜鸟教程阿里巴巴图标库其他

上一篇：微信小程序的一级页面和二级页面设置

下一篇：小程序如何更换主体以及修改管理员权限？

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。