uniapp加载第三方字体（微信小程序、h5测试通过）

方法一：CSS本地加载

• 实例

  App.vue

  @font-face {
       font-family: test1-icon;
       src: url('~@/static/iconfont.ttf');
   }
  

• 优点

  • 方便，字体下载下来就能引入

• 缺点

  • 正如uniapphttps://uniapp.dcloud.io/frame?id=字体图标中说的一样

  

  • 小程序不支持在css中使用本地文件，包括本地的背景图和字体文件，需以base64方式方可使用。

方法二：CSS远程加载

• 实例：

  App.vue文件

  @font-face{
      font-family: font-name;
      src:url('https://XXXXX/font.ttf');
  }
  

  在h5页面是没有问题的，在微信小程序的开发者工具里面有用，但是（安卓）真机调试没有用

• 优点

  • 不用占用本地代码容量，微信小程序发布的代码主包压缩后不能超过2M，所以将这些静态资源放到服务器上是一个很好的节省容量的方法
  • 内存小的话可以全部字体都放进去

• 缺点

  • 微信小程序（安卓）真机没有效果，只有h5有用

  • 

    字体文件太大即没有用

方法三：CSS本地引入base64的CSS文件

• 用工具将ttf文字文件，转成base64形式，并通过css引入

  https://www.giftofspeed.com/base64-encoder/这个网站可以将ttf文件转成base64，

  

  网站下面有三种方法引入，我选的是最后一种，因为我放进去的是ttf文件，所以也是用最下面那种方法，可以新建一个文件

  font-name.css

  @font-face{font-family:'yourfontname'; src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');}
  

  App.vue

  @import '~@/static/font/font-name.css';
  

• 优点

  • 不用操作服务器，可以本地随时引入或者删除

• 缺点

  • 对于小的字体文件，这个方法在h5和小程序端都有用，但是对于大的字体文件，却没有用，这是因为

方法四：使用API uni.loadFontFace()

• 实例

  uni.loadFontFace({
    family: 'Bitstream Vera Serif Bold',
    source: 'url("https://sungd.github.io/Pacifico.ttf")',
    success() {
        console.log('success')
    }
  })
  

• API说明：https://uniapp.dcloud.io/api/ui/font?id=loadfontface，微信小程序的开发文档也有对应的方法，需要特别注意的是：

  

• 另外还有注意的是在这个讨论中https://developers.weixin.qq.com/community/develop/doc/0006aa31bdcae81b69883ff4a50000?_at=1606209721365 ，小程序技术专员提到的

方法五：提取需要的文字，并用方法三引入

• 工具：https://www.lcddjm.com/font
• 将提取后生成的ttf文件放入方法三中提到的工具里，并用方法三的方式引入
• 该方法只适用于，第三方字体文件是静态不变化的
• 在h5和小程序端都有用

综上所述

​ 因为工作时间不便反复测试，所以很多出现问题的原因都没有深究，只是找到了解决方法后就停止了，现在做的项目只需要兼容h5和微信小程序端，所以在其它端并没有测试，仅作参考。