uniapp - 使用在線字體圖標(本地)

1. 首先打開阿里字庫，搜索圖標添加到項目

 

 

2.每次添加以后要生成新的css鏈接 

 

 

3. 前端通過上面的鏈接可以查看到對應圖標名的unicode代碼進行復制

 

 4. 配置一下即可使用在線圖標（這里是App.vue導入）

	@font-face {
		font-family: 'iconfont';
		/* project id 1657156 */
		src: url('//at.alicdn.com/t/font_1657156_6equm9708jx.ttf') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-zan:before {
		content: "\e682";
	}

	.icon-close-b:before {
		content: "\e632";
	}

	.icon-shangchuanwenjian:before {
		content: "\e613";
	}

　　

5. 在頁面中使用

 

 

6.建議項目完成后還是導入本地圖標

 

@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-zan:before {
		content: "\e682";
	}

	.icon-close-b:before {
		content: "\e632";
	}

	.icon-shangchuanwenjian:before {
		content: "\e613";
	}

 

7. uniapp支持多端或者說有差異性（有的只支持在線字體圖標，有的只支持本地字體圖標），那就這樣

 

	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1657156_6equm9708jx.ttf') format('truetype');
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-zan:before {
		content: "\e682";
	}

	.icon-close-b:before {
		content: "\e632";
	}

	.icon-shangchuanwenjian:before {
		content: "\e613";
	}

 

　　

 8. 字體圖標不支持多色彩，可以使用svg替換png(svg矢量圖等比例縮放，png位圖等比例縮放會出現鋸齒等情況)

 

 

 

 

 

好了，盡情使用吧！