Nvue引入字体图标、subNvue使用字体图标

在nvue中使用字体图标

在解决APP端使用video标签时，需要使用到subNvue原生子窗体，因为在APP端，video组件是属于原生组件，层级比所有的vue组件都要高，所以会出现video组件覆盖vue组件的问题，这个时候可以使用coverView组件或者使用subNvue来实现自定义播放器。

在使用subNvue时，需要导入自定义字体图标库，但是常规的css引入并不支持，所以只能使用weex提供的方式来引入字体图标库。

• 导入

// 可以将这一段代码放入created生命周期中。
const domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
    'fontFamily': "iconfont",
    'src': "url('https://at.alicdn.com/t/font_2372846_loihbjoxw7b.ttf')"
});

其中，src属性是在阿里云图标库生成的在线代码，将ttf文件的url复制替换后就可以实现字体图标库的导入。

• 使用

<text class="iconfont">&#xe654;</text>

只需要添加class为iconfont（这里的iconfont是图标库的font-family的值）。可是如果只是这样使用，还是不能实现需求，字体图标的位置依然是一个字体乱码，所以还需要进一步进行配置

• css配置

.iconfont{
    font-family: iconfont
}

需要在css中添加字体类型为iconfont，这样就可以正常显示字体图标了。