主页 >> 程序猿的东西 >> 小程序探坑之设置自定义字体

小程序探坑之设置自定义字体

小程序依靠微信OS为强大的后盾,加之可以跨越安卓iOS两大平台,为移动小应用开发提供了巨大的便捷。但是小程序毕竟很小,也就意味着很多限制。比如设置字体。

其实小程序并没有限制自定义字体,但是小程序之小就在于它有1M代码限制。所以,随便一个简体中文字体包就爆了。据说即使是小于1M的字体图标也不可以直接访问资源文件,需要将字体转为base64写进wxss文件。但是无论怎么说,一个正常的中文字体包都是不行的。

其实官方的Q&A里面有回答这个问题,明确说明可以通过外部文件方式使用,但是需要允许跨域请求。什么意思呢,你可以在font-face使用url指明使用什么字体,但是由于小程序相当于腾讯第n级子域名下的webview,所以你的url域名如果不是腾讯的可能出现跨域请求错误。所以似乎有说使用腾讯云可以避免这个问题,那么没有腾讯云的朋友就只能杯具吗。当然不是,比如我有阿里云的服务器,我可以在nginx做如下配置,提供两种方案,都可以实现:

#这样配置是允许所有跨域访问
location /font {
       add_header 'Access-Control-Allow-Origin' '*';
       add_header 'Access-Control-Allow-Credentials' 'true';
       add_header 'Access-Control-Allow-Methods' 'GET';
       expires    10d;
}

#这样配置只允许weixin.qq.com下级域名(小程序)的访问。
location /font {
        if ($http_origin ~* (http?://.*\.weixin\.qq\.com$)) {
            add_header 'Access-Control-Allow-Origin' $http_origin;
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET';
       }
       expires 10d;
}

我的字体文件放在/font目录下面,所以针对这个目录设置允许跨域请求。另外还需要检查nginx的mime.types文件,很多都是默认没有字体类型的,所以也要加上。

    application/x-font-ttf                ttf;
    application/font-otf                  otf;

据说许多cdn是可以设置跨域的,那就更加方便了,我木有cdn就不说了。

设置好就可以通过设置font-face来访问了,比如下面的设置。

@font-face {
    font-family: 'wenlifont';
    src: url('https://example.com/font/隶书.ttf') format('truetype');
}

.wenli-card{
    background-color: #fff8d9;
    padding: 80rpx 80rpx 80rpx;
    margin-top: 0rpx;
    font-family: wenlifont;
}

设置之后的效果就是这样:

 

但是坑在哪里呢,客户端需要一段时间来下载,如果网速慢,或者服务器带宽不够的话可能时间就更久了。那么在下载完成之前是不能正常显示的。另外有人说他在安卓和开发者工具上面设置以后可以正常显示,但是iOS上面不可以,考虑是因为https原因。所以我一开始就用了https的地址,结果是安卓不行,iOS虽然可以,但是需要等下载,所幸不是每次打开都需要下载,还是可以缓存的。

另一个不解之处是开发者工具上面,每次刷新都会重新下载字体,但是用http地址就不需要,可是我两种协议使用的都是同样的缓存策略啊。不过在手机上面又没有这种问题。

鉴于种种坑,我最终决定放弃自定义字体了。。。。

发表评论