iconfont 优势较小资源包替代app中icon等减小App包,一个font.ttf文件解决多端icon尺寸问题。
可以加载本地和网络ttf,具体写法
initIconfont() {
let dom = weex.requireModule('dom');
//通过获取platform判断加载字体文件的路径,(待完善,在手机的playground中,是无法加载本地文件的)
let platform = weex.config.env.platform.toLowerCase();
let url;
if ( "android" == platform) {
//本地资源采用'local:// '的方式加载
//第三个斜杠是代表当前目录,对于android来说,如果加载的是字体,那么就是assets目录,同理`/iconfont.ttf'`就是加载`assets`目录下的iconfont.ttf文件
url = "url('local:///font/iconfont.ttf')";//注意我这里是将字体文件放在'assets/font/''目录下的,所以
} else if ("ios" == platform) {
//todo 理论上同android未测试
url = "url('local:///font/iconfont.ttf')";
} else {
url = "url('http://at.alicdn.com/t/xxxxxxx.ttf')"
}
dom.addRule('fontFace', {
'fontFamily': "iconfont",
'src': url
});
}
在合适的地方调用initIconfont方法即可
布局中如何书写
//template
<text class=" iconfont"></text>
//css
.iconfont {
font-family:iconfont;
}
& # x e 6 6 0;即为图标Unicode
网友评论