app自定义图标 vue_【分享】在uniapp的nvue和subNVue中添加本地自定义字体/字体图标的方法...
使用uniapp做开发，时不时会遇到困难。遇到困难时，可以在Dcloud社区和QQ群提问。但Dcloud官方分配于解答开发者疑问的力量远远不足，大多数提问根本不会得到任何回复。我是个暴脾气，很多时候气得捶足顿胸。但那又怎样呢，不回复就是不回复。
以前，我对这个问题只会抱怨。后来，我想通了：自己对社区并没有太多贡献，凭什么社区无偿为你解答问题？如果每个人都愿意花一点时间，主动在社区发布一些经验分享，或者回复一些他人遇到而自己已有解决方案的问题，那么社区的质量就会提升，下次遇到问题时，在社区搜索答案就更容易命中有效答案了。
所以，从现在开始，以后但凡有些许有价值的经验总结，哪怕价值很小很小，我都会发布到社区。虽然个人的能力非常有限，解决不了很大的问题，只能从小处着手，但兴许对未来的某一个人有用呢？
以下是正文
nvue和subnvue引入自定义自体/自定义图标，不能用CSS方法，而只能用week所规定的方法。具体做法是，在nvue或subnvue页面内，引入如下js代码(uni-app编译模式下，可放置于onLoad函数内；week编译模式下，可放置于beforeCreate函数内。貌似也可以直接放置于“export default {...}”之前)。
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')"
});
其中：
@fontFace 协议名称，不可修改。
@fontFamily font-family的名称。
@src 字体地址，url('') 是保留字段，其参数如下:
http. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
https. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
local, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中.
file. 从本地文件读取, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
data. 从base64读取, e.g. url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD ....'), 上述data字段不全。
问题
问题的难点在于：src的正确写法。http和https写法要求联网加载，如果断网就无法显示，其用户体验肯定不好。local写法只有Android能够采用，iOS无法采用，兼容性差。那么，就只剩下file写法和data写法可用了。
但问题在于，file的正确写法是怎样的？我试了N种办法，都失败了。最后只能采用data写法：先百度“ttf转base64”，把ttf文件上传到网上的“ttf转base64”网页，将生成的data字段复制到上述data字段即可。但问题来了：(1)不放心那些未知网站，担心转码形成的base64有个别字节错误；(2)大段的base64数据影响代码的美观，且会干扰HX的变量提示功能；(3)修改ttf文件(如增删改图标)需要重新转码生成新的base64……总之，很不方便。
理想的写法，还是file写法，url('file://storage/...');
作为小白，在缺乏直接资料的情况下，根本不知道file正确写法是怎样的。而且这种非核心小问题，在Dcloud和QQ群上提问，是不可能得到回复的。在陆续花费了几天的时间后，终于解决了。
具体办法
(1)将自己的ttf文件(如iconfont.ttf)，放置于static目录下
(2)在nvue或subnve的js中加入如下代码：
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "iconfont2",
'src': 'url("'+"file:/" + plus.io.convertLocalFileSystemURL("_www/static/iconfont.ttf")+'")'
});
(3)在需要引入iconfont.ttf中的自定义字体/图标的页面元素的css中添加font-family: iconfont2。这一步千万别忘了。
(4)引用字体。在html中，采用"n位十进制unicode码"格式引用自定义字符/字体图标，例如“”；在js中，采用“\u四位十六进制unicode码”格式，例如“\uE005”；而在css中，则采用“\四位十六进制unicode”格式，例如“\E005”。
注意
plus.io.convertLocalFileSystemURL()函数可以把本地相对路径转换为本地绝对路径。
代码中的“file:/”只有一条斜杠，而是不两条。因为，plus.io.convertLocalFileSystemURL()函数获得的本地绝对路径，已经自带了一条斜杠。
fontFamily的值，即iconfont2可以任意取。但iconfont.ttf文件内部的字体的名称必须足够特殊、不与系统注册的其他字体的名称冲突。
“font-family: iconfont2;”必须直接放置于具体引用自定义字体的标签的css中，而不能放置于标签的父/祖标签的css中，否则自定义定体将不生效。例如：
{{text}}
data() {
return {
text: '\uE005'
}
}
.mytext1 {
font-family: iconfont2;
}
.mytext2 {
font-family: iconfont2;
}
在上述代码中，“.mytext1”由于没有直接作用于标签，因而无效；“.mytext2”由于直接作用于标签，所以有效。
补充：发现了一个巨坑：按照上述方法引用的自定义字体，仅在开发阶段(真机模拟时)有效，云打包之后仍然不能工作。
最新实测有效的建议：
在开发阶段，可采用 'src': 'url("'+"file:/" + plus.io.convertLocalFileSystemURL("_www/static/iconfont.ttf")+'")'这种写法，能在真机模拟时工作；开发完成后，打包时，可采用url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD ....')这种写法，在真机运行和打包后都能够工作。在开发阶段，也可采用url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD ....')这种写法，但不建议，原因在前文说过：干扰代码开发且不便于修改ttf文件。
另，附一个ttf文件转base64的网站
https://www.zhangxinxu.com/sp/base64.html
生成的base64，复制到HX新页面后，先将头部字符修改为data:font/truetype;charset=utf-8;base64，再复制到代码中。