uniapp 添加字体ttf

效果图如下

一、逻辑概述

在uniapp中使用字体，一共分成两种情况，一种是普通vue页面，一种是nvue页面引入字体。。

1.vue页面引入字体需要如下步骤

1. 先选择下载一种字体：字体格式一般为 ttf后缀名

黄凯桦律师手写体免费下载和在线预览 - 站长字体
 

2.通过css的@font-face属性，加载本地的字体
@font-face {
    font-family: "zhuqueSong";
    src: url('zhu_que_song.ttf');
}
3.在整个uniapp中导入加载本地字体的css文件
4. 在代码中使用

具体如下

（1）在static目录下，新建一个font文件夹，之后里面放入 font.css 和 zhu_que_song.ttf

（2）font.css文件，就是为了加载本地字体的，具体写法如下

@font-face {
    font-family: "zhuqueSong";
    src: url('zhu_que_song.ttf');
}

（3）在app.vue这个入口文件，导入font.css文件，使其在全局生效

<style lang="scss">
	@import "@/static/font/font.css";
</style>

（4）在某个页面使用字体写法，就通过css属性font-family，

<template>
    <div class="box-text-ziti">
		    怎么做都后悔的话，那就选择让自己开心的。（字体）
	</div>
</template>

<style scoped>
	.box-text-ziti{
	  font-family: "zhuqueSong";
	}
</style>

注意："zhuqueSong" 这个名字是@font-face定义的

2. nvue页面引入字体

根据官网描述uni-app官网

目前我测试成功的只有线上字体的使用

<template>
	<!-- 要在是text组件在view组件不生效 -->
	<text class="konw-box">
	    怎么做都后悔的话，那就选择让自己开心的。
	  </text>
</template>

<script setup>
//在nvue页面声明字体
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
			'fontFamily': "zhuqueSong",
			'src': "url('https://xxxxx/zhu_que_song.ttf')"
		});
</script>

<style scoped lang="scss">
	.konw-box{
        // 字体名称不加引号
		font-family: zhuqueSong;
	}
</style>