微信小程序使用CSS3字体
2020-09-27|HiShop
导读:微信小程序使用CSS3字体是在小程序开发中添加外部字体,那么要如何实现呢。...
@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>
HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。
更多小程序热点,尽在:http://www.hishop.com.cn/xiaocx/