weex笔记(3)weex使用iconfont

624 阅读1分钟

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