白羽
白羽
  • 发布:2019-09-19 21:31
  • 更新:2019-10-10 16:14
  • 阅读:270

【分享】在uniapp的nvue和subNVue中添加本地自定义字体/字体图标的方法

分类:nvue

使用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;”必须直接放置于具体引用自定义字体的标签的css中,而不能放置于标签的父/祖标签的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>标签,所以有效。

4 关注 分享
小张没有名字 951993319@qq.com 1172106013@qq.com 水灵退散

要回复文章请先登录注册

水灵退散

水灵退散

遇到这个坑了,感谢分享
2019-10-10 16:14
li.shaon@gmail.com

li.shaon@gmail.com

感谢分享!只要决定使用nvue开发的,这个点的问题我觉得是大概率遇到的。评论顶上去!
2019-09-23 11:18