uniapp、微信小程序使用网络字体、阿里云OSS网络字体经验总结,避免踩坑!

阅读数: 1548 2020年05月23日

字体都是要收费授权的,大部分小程序都不会自定义字体。可是总能碰到怎么豪横的需求,要指定字体!

有时候要使用免费字体图标。


使用字体前提条件:

1、字体如果小于2M,将字体转换成base64的face-font,复制到wxss里面就可以使用。不适合中文字体!

2、中文字体都比较大,只能网络加载。提供字体的网络服务器必须满足以下条件:

    1)文件地址需为下载类型,浏览器打开这个URL后,能自动下载。

    2)体文件返回的 contet-type 参考 font,格式不正确时会解析失败。

    3)链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com。

    4)字体链接必须是https(ios不支持http)


自建WEB-nginx提供网络字体:

1、需要设置跨域处理,否则安卓机的微信小程序不会生效!

//nginx 配置,亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
    add_header Access-Control-Allow-Origin *;
}

 2、提供 ssl 链接。



阿里云 OSS 提供网络字体服务配置(个人亲自摸索有效):

1、新建一个 bucket,因为这个 bucket 需要设置跨域问题。

2、跨域设置:选择 bucket -> 权限管理 -> 跨域设置 -> 设置

3、创建/编辑跨域规则:

    1)来源设置:*(星号,别只设置 servicewechat.com 坑货)。

    2)允许 Methods: Get 即可

    3)暴露 Headers: Content-Type

4、设置字体文件 http 头:

    1)Content-Type :  font/ttf (不同字体,内容不一样哈,参考:https://www.iana.org/assignments/media-types/media-types.xhtml#font)

然后就可以正常使用阿里云OSS提供的网络字体了!



uniapp 如何使用字体

参考文档:

https://juejin.im/post/5cd0402bf265da038932a88e

https://uniapp.dcloud.io/api/ui/font?id=loadfontface

微信小程序使用字体文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html


以下是个人代码直接嵌入微信小程序代码:

App.vue


注意:

1、中文字体都比较大,动不动就4M,下载需要时间。第一次打开小程序的时候可能会出现字消失,或字体由系统字体变成指定字体。都是网络原因!





参考资料
https://uniapp.dcloud.io/api/ui/font?id=loadfontface
https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html
https://developers.weixin.qq.com/community/develop/doc/000686c76bc0a056dd7953ab058c00
phpriji.cn | 网站地图 | | 沪ICP备17015433号-1