如何在微信小程序使用外部字体

原创 Dean 工作笔记 二维码阅读
2019-04-05 20:58

转战微信小程序已经有段时间了,在这段时间里大大小小也参与了三四个小程序的开发,感慨挺多的,总结来说就四个字,坑不胜数,刚爬出一个坑又掉进另一个坑没尽头的感觉,怎么说呢?

有了解过微信小程序的朋友都应该知道,微信小程序其实说白了就是一个浏览器,一个基于webkit内核的浏览器,我们浏览特定的小程序其实就是在浏览特定的网页,但是问题是这个浏览器和同样基于webkit内核的其他浏览器比如chrome并不一样,他是一个内核被修改过的浏览器,而且你完全不知道到底修改了些什么?到底哪些功能被改掉了?在修改的过程中又留下了一些什么坑,当然本文并不旨在谈论这些坑和其解决方案,因为太多了,我会在后面的文章中一一道来,本文的重点是如何在小程序中使用外部字体。

其实对于一般的需求,系统预置的字体已经够用了,但是总归会有使用到外部字体的时候,在普通浏览器中我 们可以直接在css中导入本地字体或者一个网络字体,但是这种方式在微信小程序中并不适用(网络字体并不是不行不过会有诸多限制,而且中文字体一般都不小,请求很耗时的),那么我们如何导入外部字体呢?对于图片我们可以转换成base64,然后直接通过dataUrl来访问,那么对于字体我们是不是也能做同样的操作呢?答案当然是可以的,我们需要借助一个第三方网站。https://transfonter.org/

具体如何操作呢?

1、首先找到我们需要使用的字体文件包,格式的话TTF, WOFF, WOFF2, SVG随便哪一种都可以,但是大小不要超过10MB,如果文件大小超过10MB,我们也可以通过字蛛(font-spider)服务来压缩,具体使用方式这里不细说,可以去官网了解安装及使用方式,官网链接:http://font-spider.org/。

2、打开我们上 main提到的转换网站:https://transfonter.org/,界面是下面的样子,

记住已定要勾选base64哦,接着我们点击Add fonts添加字体文件,等到字体上传完毕后点击convert转换字体文件,转换完毕后点击Download下载资源文件压缩包,

压缩包包括了转换后的字体文件目录fonts, css,styles还有一个demo页,下载完毕后我们找到stylesheet.css文件

将所有内容复制到app.wxss中,接下来我们就可以在小程序中任意使用我们导入的外部字体了,另外此中方法也适用于阿里巴巴iconfont字体的导入哦,有兴趣的朋友不妨去试试。

本文地址:https://www.deanhan.cn/wx-app-add-fonts.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信