微信小程序如何引入外部字体库iconfont的_软件运维

如何引入外部字体库iconfont的图标，具体如下

直接使用阿里巴巴的网络路径

选择iconfont图标

官网：阿里巴巴矢量字体库

步骤：阿里巴巴字体库使用方法

全局引入app.wxss

12345678910111213141516171819202122232425262728293031323334@font-face { font-family: 'iconfont'/* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot') src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'), url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'), url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg')}.iconfont { font-family:"iconfont" !important font-size:60rpx font-style:normal -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale}/*本项目使用的18个图标 */.icon-zhiding:before{content: '\e739'}.icon-zuojiantou:before{content: '\e736'}.icon-youjiantou:before{content: '\e735'}.icon-shangjiantou:before{content: '\e734'}.icon-xiajiantou1:before{content: '\e733'}.icon-xiajiantou:before{content: '\e6cc'}.icon-gengduotianchong:before{content: '\e67f'}.icon-erweima:before{content: '\e65f'}.icon-fenleiorguangchangorqita:before{content: '\e64f'}.icon-dibiao:before{content: '\e64d'}.icon-bangzhu:before{content: '\e64a'}.icon-xinfeng:before{content: '\e640'}.icon-duihuaxinxi:before{content: '\e639'}.icon-sousuo:before{content: '\e62f'}.icon-shouye:before{content: '\e62d'}.icon-shezhi:before{content: '\e62a'}.icon-shanchu:before{content: '\e629'}.icon-dianhua:before{content: '\e61b'}

使用图标

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

注意：此处实现采用的是无APPID的开发模式，实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成base64格式

解压压缩包 —- 找到ttf格式文件 —- 上传到平台转化为base64格式 —- 下载压缩包 —- 将css文件名改为wxss —- 放入项目文件夹 —- 用@import全局引入 —- 使用

使用—-引入及全局定义

123456789101112131415161718192021222324@import "src/css/icon.wxss".iconfont { font-family: "iconfont" font-size:60rpx}/*本项目使用的18个图标 */.icon-zhiding:before{content: '\e739'}.icon-zuojiantou:before{content: '\e736'}.icon-youjiantou:before{content: '\e735'}.icon-shangjiantou:before{content: '\e734'}.icon-xiajiantou1:before{content: '\e733'}.icon-xiajiantou:before{content: '\e6cc'}.icon-gengduotianchong:before{content: '\e67f'}.icon-erweima:before{content: '\e65f'}.icon-fenleiorguangchangorqita:before{content: '\e64f'}.icon-dibiao:before{content: '\e64d'}.icon-bangzhu:before{content: '\e64a'}.icon-xinfeng:before{content: '\e640'}.icon-duihuaxinxi:before{content: '\e639'}.icon-sousuo:before{content: '\e62f'}.icon-shouye:before{content: '\e62d'}.icon-shezhi:before{content: '\e62a'}.icon-shanchu:before{content: '\e629'}.icon-dianhua:before{content: '\e61b'}

开发使用

效果图

H5游戏和微信小游戏的区别：

关于能力/效果

微信小游戏大部分是基于微信小程序，局限很多，很多借口都需要借助微信开放的开发者接口，而H5游戏可以任意接入高级互动玩法，比如意派Epub360 就支持svg、序列帧，一镜到底、全景，画中画，测试答题等效果，支持对接第三方api接口……

关于用途、寿命周期

H5侧重营销推广活动，H5游戏也是H5，H5一般的作用是营销推广品牌，产品或活动，所以H5一般也是用于引流，一般是短期内达到一定的宣传效果，比如pv/uv值，寿命较短，活动下线，H5也就下线了，几个小时到几周不等。

微信游戏更多侧重拉新、用户粘度，日活、付费转化等产品指标的数字，一般是要长期运营的，寿命周期看运营方。

关于审核

微信小游戏需要审核，而H5小游戏没那么严格，但都需要遵循《微信外链管理办法》。

关于发布渠道

H5游戏本质上是一个集图文、音视频、交互动画及数据为一体的网页，除了微信，也可以在支付宝、头条、网页上打开，而微信小游戏只能在微信端打开。

关于成本

微信小游戏基于小程序的开发，本身开发的费用就比较高一些，另外还需要持续运营，迭代维护，这就没准了，几万到几百万都有可能，H5游戏用于推广，简单开发，可能不会有那么好的体验服务，成本也相对较低

1、背景图片设置可以用服务器上的图片。

2、也可以将本地图片转成base64的。

wxml:

js:

data: {

background: "/style/images/icon_coupon_backgroud.png",

/**

* 生命周期函数--监听页面加载

onLoad: function(options) {

//设置背景图片

let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')

this.setData({

'background': 'data:image/pngbase64,' + base64

})

//设置导航栏标题

wx.setNavigationBarTitle({

title: '下发优惠券'

})

wxss:

.topview-left {

display: flex

flex-direction: column

align-items: center

justify-content: center

width: 30%

height: 113px

background-repeat: no-repeat/** 不重复*/

background-size: 100% 100%

background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/

}

3、也可以直接设置定位实现。

</view>

效果：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/12113369.html

微信小程序如何引入外部字体库iconfont的

发表评论

评论列表（0条）

微信小程序 如何引入外部字体库iconfont的

发表评论

评论列表（0条）

微信小程序如何引入外部字体库iconfont的