uni-app使用字体包(.ttf)、字体转换格式和不转换字体方式

1.使用本地字体

本地字体文件小于40kb，直接引入使用
在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；

@font-face {
  font-family: "xxx"; // 引入字体包，自己起的名字
  src: url('./static/font/xxx.ttf'); // 字体包本地路径
}

一般在static建font文件夹，直接把字体包放在新建的文件夹下面，在app.vue引入字体包，全局可使用

当本地字体文件大于40kb，需要转化为 base64 格式
字体转换网站：https://www.giftofspeed.com/base64-encoder

选择字体，然后复制base64代码，

@font-face {
  font-family:'字体名字';
  src: url(data:application/font-ttf;charset=utf-8;base64,把上面转化base64格式复制到此位置) format('truetype');
}

2.线上字体包

@font-face {
  font-family: "字体名字";
  src: url('线上字体包地址') format('truetype');
}

使用方法：

body {
  font-family: 字体名字; // 即可生效
  font-size: 28rpx;
}

App.vue全局引用

@import url('./static/文件地址');

如果你用的是less或者scss在App.vue文件style添加 lang="scss"或者 lang=“less”

3.字体下载（可以直接百度找，我这个就举例说明）
找字网

4.字体转换格式
https://www.fontsquirrel.com/tools/webfont-generator

5.不转换格式方式
不转换格式有些字体过大比如otf格式字体
使用在线压缩https://cloudconvert.com/otf-converter

注意
小程序用 uniapp官方提供的方法uni.loadFontFace()