uni-app中使用iconfont

前言

uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样；
app端不支持在main.js引入的css样式，需要在style中引用；
微信小程序不支持本地的字体图标文件,不支持相对路径，需要换成网络路径；

为了一套样式多端适用，我们使用下面这种方式来实现

首先打开阿里巴巴矢量图官网

复制图中的代码，那个是网络路径；

在uni-app项目中，app.vue文件下，style中粘贴网络地址并加上https:
并修改成如下样式

	/*每个页面公共css */ 
	@font-face {
    
    
			font-family: 'iconfont';
			src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot');
			src: url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.eot?#iefix') format('embedded-opentype'),
				url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff2') format('woff2'),
				url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.woff') format('woff'),
				url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.ttf') format('truetype'),
				url('https://at.alicdn.com/t/font_2036521_10twsb1mz07.svg#iconfont') format('svg');
		}
	
	
	.iconfont {
    
    
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}

你可以将矢量图标项目下载到本地，将其中iconfont.css文件打开，路径修改成上述网络路径，在style中引用即可：注意使用绝对路径
import url('@/static/iconfont/iconfont.css')

在页面内使用方式为

		<text class="iconfont" style="font-size: 100rpx;">&#xe6dd;</text>
		<text class="iconfont icon-chazishanchudaibiankuang"></text>

目前，H5,app,wx小程序都能正常显示……待更新