编程语言
首页 > 编程语言> > 微信小程序(笔记)——小程序中使用自定义字体

微信小程序(笔记)——小程序中使用自定义字体

作者:互联网

一、引用网址

想要使用自定义字体需要引入外部字体库,首先下载自己需要的字体,下载完成之后是 *.ttf 文件或者 *.TTF 文件,将文件放在自家服务器上引用链接使用。

使用默认字体是这样

微信有动态下载字体的方法

    wx.loadFontFace({
      family: 'GJGMedium',
      source: 'url("https://zijiadewangzhi.com/font/GenJyuuGothic-Medium.ttf")',
      success(res){
        console.log(res)
      },
      fail: function (res) {
        console.log(res)
      },
      complete: function (res) {
        console.log(res)
      }
    })

  

返回这个是下载成功了

这样是失败了

 

如果一直报错这个没关系,不用管

 

 注意:链接使用 https 开头

官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

 缺点:下载失败的时候没有说明原因,但是我用的大部分字体都是没问题的

二、压缩字体

因为我用的特殊字体文字很少,引用整个字体库很占空间,所以我找到了一个压缩字体库的办法,只把需要的字体提取出来

没有压缩前:2.73MB

 

 

首先下载一个软件 【 Fontmin 】,使用起来很简单

官方网址:https://ecomfe.github.io/fontmin/

下载之后是压缩包

 

 

 解压得到两个文件

 

 

 打开软件是这样的

 

 

左边文本片段输入用到的文字,把下载好的字体库拖拽到左下方,点击生成

 

 

 成功之后得到一个文件夹,里边有各种格式的字体库

 

 

 可以看到压缩后的 *.TTF 文件 只有 5KB,但是我们不需要这个,需要的是最后一个 *.css 文件,用记事本打开,把它复制到小程序 app.wxss 文件

 

 

 只留下最多的这个 url(data:...) 这个就行

  

 

成功!

 

标签:文件,自定义,微信,程序,字体库,字体,https,res,下载
来源: https://www.cnblogs.com/yeshengshudaixiong/p/12101995.html