uniapp使用第三方字体

一、CSS远程加载

App.vue

@font-face{
    font-family: font-name;
    src:url('https://XXXXX/font.ttf');
}
在微信小程序的开发者工具里面有用，但是（安卓）真机调试没有用

二、引入本地字体，太大小程序会无法上传---font.ttf文件转换成base64格式

文件转换地址--transfonter

 

 使用
<style lang="scss">
  /*每个页面公共css */
    @import "@/static/zt.css";
    .YouSheBiaoTiHei{
        font-family: 'YouSheBiaoTiHei';
    }
</style>

三、使用API uni.loadFontFace()

App.vue

onLaunch: function () {
  uni.loadFontFace({
    global: true, // 是否全局生效
    family: 'font-name', // 定义的字体名称
    source: 'url("https://xxx.com/font/font-name.ttf")', // 字体资源的地址。建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。
    success() {
      console.log('成功的回调函数')
    },
    fail(){
      console.log('失败的回调函数')
    },
    complete(){
      console.log('接口调用结束的回调函数（调用成功、失败都会执行）')
    }
  })
},

API说明：uni.loadFontFace(Object object) | uni-app官网，微信小程序的开发文档也有对应的方法，需要特别注意的是： 

另外还有注意的是在这个讨论中wx.loadFontFace加载字体,安卓真机fail,模拟器和ios真机正常 | 微信开放社区 ，小程序技术专员提到的

运用字体网站 下载-字体天下

使用
.font-name {
  font-family: font-name;
}