uni-app引入阿里巴巴icon在线图标

最帅的GISer

于 2021-03-17 15:33:10 发布

阅读量593

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/qq_43391694/article/details/114932753

版权

uniapp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Weex项目中使用addRule方法加载自定义字体文件，并通过实例展示了如何在组件样式中应用这些字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入方法采用weex的addRule方法，在这之前要确保在manifest.json中配置好 "app-plus"中的"renderer": "native", "nvueCompiler":"uni-app", //是否启用 uni-app 模式。

使用addRule方法时，fontfamily首先设置一个名字，这个名字在后面自定义style时使用，最后引用该style即可。

<template>
	<view>
		<text class="myfont" style="font-size: 80px;">&#xe619;</text>
		<text class="myfont" style="font-size: 80px;">&#xe67c;</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad() {
			const domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
			    'fontFamily': "iconfont1",
			    'src': "url('https://at.alicdn.com/t/font_2418732_ra1vy7376ef.ttf')"
			});
		},
		methods: {
			
		}
	};
	
	
</script>

<style>
	  .myfont {
	    color: green;
	    font-size: 36px;
	    font-family: iconfont1;
	  }
</style>

后面可以直接写在app.vue中，直接在app启动时候就加载字体。