uniapp开发的小程序||微信小程序 中引入自定义字体库

uniapp开发的小程序||微信小程序 中引入自定义字体库

概要

1. 下载字体库
2. 把ttf文件转成base64编码的字符串
3. 在微信小程序中引入base64编码的字体文件
4. 在uniapp中引入base64编码的字体文件
5. 字体库太大进行缩小

1. 下载字体库

在网上下载需要的字体库(或者自己设计的字体库)，下载后解压得到ttf文件,这个兼容性比较好。

2. 因为微信小程序无法解析图标字体，需要把下载的字体进行base64编码，如下图：

3. 把ttf文件转成base64编码的字符串，转换之后点击【download】进行下载，得到一个base64编码的字体文件，把文件中的.css放到项目的static文件夹下，下图是下载后的文件：

4. 把下载的.css文件中的base64编码的字符串放到项目的static文件夹下的【你命名的文件名】.css文件中，如下图：

5. 在需要使用的地方引入字体文件，例如在Index.vue中引入：font-family: YouziFont;要与css文件里的font-family: 'YouziFont';一致，如下图：

<template>
	<view class="youzifont">
		youzifont quickly
	</view>
</template>
 
<style lang="scss" scoped> 
	@import '../static/fonts/youziFont.css';
    .youzifont {
        font-family: YouziFont;
    }
</style>

6. 接下来预览——在微信开发者工具中预览，如下图：

7.注意点：

• 字体样式文件大小不要太大，否则会报错,具体我没有试验，我开始是4M的一直编译错误,现在是100k以内是正常的。

• 字体文件名要与css文件名一致，例如：font-family: 'YouziFont';，@import '../static/fonts/youziFont.css';，font-family: YouziFont;，其中youziFont要一致。
• 字体文件名不要使用中文，否则会报错，例如：font-family: '字体';，@import '../static/fonts/字体.css';，font-family: 字体;，其中字体要一致。

8.如果字体太大，可以使用字体压缩工具，只把需要的字体导入就行：

9.如果没有办法确定文字压缩，可以使用在线字体，把字体库放到服务器上:

	onLoad() { 
		// 字体库加载，引入多个，兼容性更好
		uni.loadFontFace({
			global: true, // 开启全局生效
			family: 'youziFont',
			source:[
				'url("https://服务器域名/upload/zyz/youziFont/youziFont.ttf")',
				'url("https://服务器域名/upload/zyz/youziFont/youziFont.woff2") format("woff2")',
				'url("https://服务器域名/upload/zyz/youziFont/youziFont.woff") format("woff")',
			].join(',\n'),
			success() {
				console.log('success')
			},
			fail(e) {
				console.log('err：',e)
			}
		}) 
	}, 

	<style lang="scss" scoped>  
		/* 应用 */ 
		.container {
			font-family: youziFont;
			height: 100vh;
			overflow: hidden;
		}
	</style>
	```