在微信小程序中使用第三方字体的一些方法

大家知道,很多字体都没有商用的权限,典型的比如“微软雅黑”,如果商用它的话就需要给方正公司交大量的版权费。因此,我们会使用一些免费商用的字体,比如macOS系统自带的字体,或者像阿里巴巴普惠体之类的字体。笔者就是在设计时使用的阿里巴巴普惠体,然而在开发微信小程序的时候,它并不支持直接把字体放在项目文件中,然后使用@font-face的方式使用。那么我们该怎么做呢?

wx.loadFontFace

这是使用javascript使用第三方字体的方式。它要求从网上下载一个字体文件,然后导入到小程序中。具体使用方法可以参考wx.loadFontFace(Object object) | 微信开放文档 (qq.com)

wx.loadFontFace({
      family: 'AlibabaPuHuiTi', //设置一个font-family使用的名字
      global: true,//是否全局生效
      desc: {weight: 100},  // 字体宽度
      source: 'url("https://miniprogram.samweiqi.wang/resources/fonts/AlibabaPuHuiTi-2-35-Thin.ttf")', //字体资源的地址
      success: function(){
        console.log('调用成功')
      },
      fail: function () {
        console.log('调用失败')
      },
    })

这是一个wx.loadFontFace用法的示例。如果你能找到字体对应的链接的话,直接使用它就好了。如果你要和我一样使用阿里巴巴普惠体的话,我把它传到了自己的服务器上https://miniprogram.samweiqi.wang/resources/fonts

我用nginx搭建的下载服务器

不过这种做法是有一些限制的。微信小程序只能向白名单上的服务器发起请求,其他的服务器是不行的。如果你用了一个web框架编写了一些代码(我用的django),并把它部署在了web服务器上(我用的nginx),那么可以直接用web服务器自己做一个下载站,从上面下载字体。

我直接把wx.loadFontFace写在了微信小程序项目根文件夹中的app.js文件里,这样每次在微信小程序启动的时候,都会自动加载服务器中的字体文件了。

Nginx下载服务器

其实很简单,找到nginx的配置文件,然后在最底部追加以下代码就可以:

# 文件下载
    location /resources {
      root /www/wwwroot/[你的网址]/;
      autoindex on;
      autoindex_exact_size off;
    }

比如我的后台服务运行在/www/wwwroot/miniprogram.samweiqi.wang里面,我在miniprogram里建一个文件夹resources存储所有可被下载的内容,location后面就填写/resources,root后面就填写/www/wwwroot/miniprogram.samweiqi.wang,后面两行不用改。


2021.9.10更新

@font-face

除了在js文件中引入第三方字体外,在css文件中使用@font-face也可以引入第三方字体。下面我们来看看怎做:

@font-face {
  font-family: "AlibabaPuHuiTi";
  src: url("https://miniprogram.samweiqi.wang/resources/fonts/AlibabaPuHuiTi-2-65-Medium.ttf") format('truetype');
  font-weight: 400;
}

这里format(‘truetype’)中的truetype是指ttf格式。

想看更多?欢迎来我博客的开发区看看:https://samweiqi.wang/index.php/%e7%bc%96%e7%a8%8b/

留下评论