- 在Weex代码中加载自定义字体
在beforeCreate中加载字体文件:
beforeCreate: function () {
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
'fontFamily': "myfont",
'src': "url('http://xxx.ttf')"
});
}
addRule(type, contentObject)
- @fontFace 协议名称,不可修改。
- @fontFamily font-family的名称。
- @src 字体地址,url('') 是保留字段,可接受的参数如下:
1. http, url('http://xxx.ttf')
2.https,url('https://xxx.ttf')
3.local,url('local:///foo.ttf'),Android 从assets目录读取;官方文档这里貌似写错了,必须有三条'/'才可以。
4.file,从本地文件读取, url('file://xxx.ttf')
5.data. 从base64读取, url('data:font/truetype;charset=utf-8;base64,xxx....')。
以上基本为官方文档已有说明,需要注意??:
1.使用local加载工程中的ttf时,iOS没有目录限制,只要ttf在工程中存在,在plist中加上一个Array类型的UIAppFonts属性,新增一条xxx.ttf的item即可;
2.css中,font-family的值不能添加引号,否则不会生效,笔者因为这个问题各种尝试才发现。(若使用font-family:"Lato-Bold";则不会生效)
.txt {
font-family: Lato-Bold;
color: '#262626';
}