Weex provide the ability of loading custom through DOM.addRule. Developers can load iconfont and custom font by specifying the font-family.
Developers may use the following code snippet to load their font:
const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { 'fontFamily': "iconfont2", 'src': "url('http://at.alicdn.com/t/font_1469606063_76593.ttf')" });
The parameter of Add Rule is illustrated as following:
url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
url('local://foo.ttf')
, the foo.ttf is in your android assets directory.url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')
, the above data field is only a part of the actual data.Note: You can name
fontFamily
inaddRule
as you wish in your page, any string is OK. But this is not the real font-family name of the font file. The real name or system name for the font is stored in binrary data of ttf file. You must ensure that the real font-family name of font file is unique. Or your font may not be successfully registered to device and your text may display as a ‘?’.
Note: Specially, if you are using http://www.iconfont.cn/ to build your iconfont. Make sure that you set a unique enough font-family name for your font in project settings.
Note: Calling
addRule
inbeforeCreate
is recommended.
Check the custom font example.