|
@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后引用。
可以从阿里巴巴图标库（http://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 教程 | 菜鸟教程 阿里巴巴图标库 其他
|
