• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序引入字体注意点

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序引入字体有2种方式,
第一种是通过 @font-face ,第二种是通过小程序提供的方法 loadFontFace

引入的方式不同但是需要注意的地方大致形同:

官方提出了以下的注意事项
字体文件返回的 contet-type 参考 font,格式不正确时会解析失败。
字体链接必须是https(ios不支持http)
字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略
‘2.10.0’ 以前仅在调用页面生效。

总的来说

  1. 微信小程序端只支持网络字体,字体链接必须是https,所以本地引入的方法是行不通的。(想想也是。字体包动不动几个M,很难编译)
  2. 引入中文字体,体积过大时会发生错误
  3. 工具里提示 Faild to load font可以忽略 (不要看到开发者工具里提示就以为有问题)

这里记录几种解决字体引入的几种方式:

1. 字体转base64

  • 打开字体在线转换工具 https://transfonter.org/
  • 将下载解压后的css 文件打开,复制黏贴就好了
  • 需要注意的是,这里的字体最大可以上传 10M

2. 第二种就是官方提供的一种方法,抽离出部分中文,减少体积,或者用图片代替。
图片代替我们都知道,这里记录一下抽离文字,对于抽离文字,我们需要利用一个工具
Fontmin

  • 下载安装包后解压软件
  • 在左侧输入我们能够使用到的文字,点击生成,就会得到一个新的字体库,这里面包括新的ttf 文件和 css引入文件。
  • 最后只要看需要,不管是引入base64 还是引入新的 ttf 字体都是可以的。

3. 考虑插件
因为我使用的uni-app 这种多端开发,所以插件库里会有各种插件,这里官方推荐了一种字体引入的插件https://ext.dcloud.net.cn/plugin?id=954
(因为我还没有使用过这个插件,所以就不记录了,有兴趣的可以去看看)

以上


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序布局左右三区块发布时间:2022-07-18
下一篇:
微信小程序分享之生成海报--canvas发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap