nvue页面自定义字体

addRule 函数

 1 @原型: addRule(type, contentObject)
 2 @参数:
 3   type: [String fontFace 必需] 协议名称， 不可修改， 固定值为： fontFace。
 4   contentObject：[Object 必需] 字体配置
 5   {
 6     'fontFamily': //[String 必需] 字体名称， 注意不要和系统字体名冲突， 要起一个不会冲突的字体名
 7     'src': [] // [string 必需] 字体路径
 8       //支持格式如下：
 9       //【http】比如： url('http://at.alicdn.com/t/font_1469606063_76593.ttf')
10       //【https】比如：url('https://at.alicdn.com/t/font_1469606063_76593.ttf')
11       //【本地文件】 比如： url('file://storage/emulated/0/Android/data/com.alibaba.weex/cache/http:__at.alicdn.com_t_font_1469606063_76593.ttf')
12       //【base64】 比如：url('data:font/truetype;charset=utf-8;base64,AAEAAAALAIAAAwAwR1NVQrD+....')
13   }

示例代码：

 1 <template>
 2         <view>
 3             <text class="my-iconfont">&#xe85c;</text>    
 4         </view>
 5     </template>
 6     <script>
 7         export default{
 8             beforeCreate() {
 9                 const domModule = uni.requireNativePlugin('dom')
10                 domModule.addRule('fontFace', {
11                     'fontFamily': "myIconfont",
12                     'src': "url('http://at.alicdn.com/t/font_2234252_v3hj1klw6k9.ttf')"
13                 });
14             }
15         }
16     </script>
17     <style>
18         .my-iconfont {
19             font-family:myIconfont;
20             font-size:60rpx;
21             color: #00AAFF;
22         }
23     </style>

addRule