美文网首页
weex笔记(3)weex使用iconfont

weex笔记(3)weex使用iconfont

作者: FateOfKing | 来源:发表于2018-11-28 16:43 被阅读0次

    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

    相关文章

      网友评论

          本文标题:weex笔记(3)weex使用iconfont

          本文链接:https://www.haomeiwen.com/subject/valzqqtx.html