uniapp-使用字体包(.ttf)

一、使用本地字体包

• 本地字体文件小于40kb，直接引入使用

在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式

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

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

• 当本地字体文件大于40kb，需要转化为 base64 格式

字体转换网站：https://www.giftofspeed.com/base64-encoder

 

先选择.ttf文件,白色方框里面就是base64格式的文件 

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

 如图：

在app.vue引入，全局可用 

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

二、在线引入字体包

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

使用方法

.header {
  width: 100%;
  height: 80rpx;
  font-family: 字体名字; // 即可生效
  font-size: 28rpx;
}

三、字体下载

1.DaFont - Download fonts

2.字体源文件 / 字体TTF_字体下载之家-专业的字体下载站 (homefont.cn)