weex用阿里矢量图

Posted 2020-10-31 安筱雨

首先这段代码来自 zwwill在github上的 weex网易严选项目

他是在utils下封装了一个方法

let utilFunc = {
    initIconFont () {
        let domModule = weex.requireModule(‘dom‘);
        domModule.addRule(‘fontFace‘, {
            ‘fontFamily‘: "iconfont",
            ‘src‘: "url(‘http://at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf‘)"
        });
    }
}

 通过  dom模块的 addRule方法

能够在html的中添加代码

字体图标有很多文件，ttf,eof,svg,woff

但是只加载这个 ttf 就能出现效果了

执行 initIconFont 之后 就在html中添加了一下代码

@font-face {
  font-family: ‘iconfont‘;  /* project id 630973 */
  url(‘//at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf‘) format(‘truetype‘)
}

 然后字体图标就生效了

注意：字体图标的链接记得改成自己的。