uniapp 引入外部字体

uni-app 支持使用字体图标,请仔细阅读官方文档:地址

一、当字体文件小于40kb时,uni-app 会自动将其转化为 base64 格式,直接引入即可

@font-face {
     font-family: xxxxx;
     src: url('~@/static/xxxx.ttf');
 }

当字体文件大于40kb时,需要自己转化成base64格式:

1、将下载好的字体文件转换成base64格式,转换地址


####### 步骤:

  1. 点击【Add fonts】,选择文件
  2. 打开【Base64 encode】
  3. 点击【Covert】
  4. 点击【Download】下载文件并解压,打开 stylesheet.css 文件,复制代码
2、转换完成后,下载文件,解压后将这三个文件放入项目中的static目录下:
3、在App.vue中引入该文件
@import url("./static/fonts/stylesheet.css");
4、在代码中正常使用即可:
例如:font-family: YOUSHEhaoshenti;

或者在阿里巴巴矢量图标图 地址 中查找需要下载的字体文件