【微信小程序】使用自定义字体的三种方法

一、loadFontFace接口

小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多。必须https且同源,canvas等原生组件不支持。注意!!使用本地文件无效,必须使用网络地址。

官方文档:wx.loadFontFace(Object object) | 微信开放文档

演示代码:

wx.loadFontFace({
  family: 'DFPWaWa-B5',
  source: 'url("https://we7.stuyun.com/DFPWaWa-B5.ttf")',
  success: res => {
    console.log('font load success', res)
  },
  fail: err => {
    console.log('font load fail', err)
  }
})

二、face-font url

传统的css规则,跟loadFontFace限制一样,必须https且同源,不支持canvas等原生组件,不支持本地文件。

演示代码:

@font-face {
    font-family: 'DFPWaWa-B5';
    src: url("https://we7.stuyun.com/DFPWaWa-B5.ttf")
}

三、face-font base64

网上教程常介绍的方法,到transfonter上传文件,formats只勾选ttf就行。可以将字体转换成base64的face-font,复制到wxss里面就可以使用。但是缺点也很明显,小程序最大体积限制只能2m,随便一个中文字体就超过了。

一、找设计要.ttf文件的字体

二、通过在线文字转换工具对文件进行转换,将字体转化为base64的face-font

操作步骤:

1.点开在线文字转换工具

2.点击按钮Add fonts(添加字体,这里所要传的文件就是找设计要得.tff文件)

3.将Base64 encode按钮打开(Base64 编码),下面的Formats按钮(格式按钮)只需勾选TTF格式

4.点击Convert按钮(转换按钮),转换好后点击左边的Download(下载),将下载好的文件打开,里面会有一个stylesheet.css文件

【微信小程序】使用自定义字体的三种方法_第1张图片 

三、复制下载好的stylesheet.css文件内容,粘贴到需要使用的wxss文件内

  @font-face {
      font-family: 'DFPWaWa-B5';
      src: url('./fonts/DFPWaWa-B5.ttf') format('truetye');   //这里的路径为上面转换吼的base64的路径
    }

    .box {
      font-family: 'DFPWaWa-B5';      //运用在你所需要的标签样式上,名字和上面引入的font-family名称要一一对应,记得要加''
    }

四、总结:最好还是使用小程序官方提供的loadFontFace接口,最便捷的加载字体的方法不过限制颇多。我这边的需求只能通过第三种方法实现,具体还是看各位的需求去使用哪种方法

你可能感兴趣的:(小程序)