【分享】在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('') 是保留字段，其参数如下:
  1. http. 从HTTP请求加载, e.g. url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
  2. https. 从HTTPS请求加载, e.g. url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
  3. local, Android ONLY. 从assets目录读取, e.g. url('local://foo.ttf'), foo.ttf 是文件名在你的assets目录中.
  4. file. 从本地文件读取, e.g. url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
  5. 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码"格式引用自定义字符/字体图标，例如“&#57349”；在js中，采用“\u四位十六进制unicode码”格式，例如“\uE005”；而在css中，则采用“\四位十六进制unicode”格式，例如“\E005”。

注意

1. plus.io.convertLocalFileSystemURL()函数可以把本地相对路径转换为本地绝对路径。
2. 代码中的“file:/”只有一条斜杠，而是不两条。因为，plus.io.convertLocalFileSystemURL()函数获得的本地绝对路径，已经自带了一条斜杠。
3. fontFamily的值，即iconfont2可以任意取。但iconfont.ttf文件内部的字体的名称必须足够特殊、不与系统注册的其他字体的名称冲突。
4. “font-family: iconfont2;”必须直接放置于具体引用自定义字体的<text>标签的css中，而不能放置于<text>标签的父/祖标签的css中，否则自定义定体将不生效。例如：

   <view class="mytext1">  
   <text class="mytext2">&#57349{{text}}</text>  
   </view>

   data() {  
    return {  
       text: '\uE005'  
    }  
   }

   .mytext1 {  
       font-family: iconfont2;  
   }  
   .mytext2 {  
       font-family: iconfont2;  
   }

在上述代码中，“.mytext1”由于没有直接作用于<text>标签，因而无效；“.mytext2”由于直接作用于<text>标签，所以有效。

补充：发现了一个巨坑：按照上述方法引用的自定义字体，仅在开发阶段（真机模拟时）有效，云打包之后仍然不能工作。
最新实测有效的建议：
在开发阶段，可采用 '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，再复制到代码中。