收藏
评论

我个人总结的小程序字体解决方案

最近在用到小程序的字体,用起是真的有一丝烦躁,各种莫名其妙的bug。下面做一些总结,免得大家犯同样的错误,同样也希望官方能出一个详细的字体解决说明。


问题原因:

  1. 首先使用字体无非就是用font-family,在网页上是有很多很好的探讨的文章。但是在小程序中,我们并不知道font-family支持哪些字体,据我这一周的查找,官方也没有详细的说明。

  2. 因此如果我们想使用某种字体,最好的方法只有通过font-face外部引入字体。

  3. 但是小程序是不支持引入本地的字体文件,即font-face中的src属性的值不能是本地路径。否则会报do-not-use-local-path错:


    因此我所知道的最终的解决方案就有两种

    1.引入网络路径

    2.通过base64编码引入



    ①引入网络路径的方法是将你的字体文件放在服务器中,然后通过网络路径引入,需要注意跨域的问题(可能因为我把字体文件放在腾讯云的对象存储中了,因此没有专门处理跨域也没有问题,但是不排除你可能会遇到跨域问题)。使用这种方法时要注意字体文件不能太大,具体限制我也不清楚。这里我只测试过3M的中文字体,会报ERR_CACHE_MISS,这个情况下,虽然在开发工具上显示的字体是正确的,但是预览到真机上就直接表现为字体文件没有加载的效果。(另外,即使你的字体文件很小,也会在 清除缓存后第一次编译 报这个错,但这种情况下预览到真机上是没有问题的)



②第二种方式就是通过base64编码引入。使用这种方法时需要注意一点,很多转base64编码的工具(例如我这里使用的font-min)会自动帮你兼容ie,生成的代码像这样:

在网页上这样用是没有问题的,还兼容其他浏览器。 但是在小程序中是不行的,必须把多余的部分全部删除,只留base64那一行,不然在开发工具上显示直接没有加载字体的效果,像这样:


另外据说base64编码不能太大,否则也会出错;这里由于我的需求只是需要几个固定文字,因此生成的base64很小,没有遇到这个问题。



以上就是我在处理小程序字体时遇到的问题总结,希望大家遇到时能少走弯路; 总结的不对的地方,欢迎大家讨论指正。

收藏

9 个评论

  • bestRktnZnnn
    bestRktnZnnn
    2021-11-10

    感谢,使用fontmin 抽取了2500个常用字出来,700kb,分包加载,使用base64方式,各端完美

    2021-11-10
    赞同
    回复 1
    • 恶霸盘大侠
      恶霸盘大侠
      2022-02-05
      需要版权授权吗?
      2022-02-05
      回复
  • -    小小 ~
    - 小小 ~
    2018-10-16

    因为华康少女字体ttf体积太大5M多,所以专门弄的2000常用字体积是900多k,但是手机上依然不显示替换好的字体


    而且想看报错都看不了,找错也不知道该往哪里找了。

    求解答

    2018-10-16
    赞同
    回复
  • Kingchan
    Kingchan
    2018-05-24

    引入网络路径在安卓机上无效

    2018-05-24
    赞同
    回复
  • 2018-05-11

    回5楼  , 字体还可以只转化我们需要用到的固定文字吗?  是的, 可以 。 详情见 font-min。

    2018-05-11
    赞同
    回复 1
  • 浓茶
    浓茶
    2018-05-10

    需求只是需要几个固定文字,因此生成的base64很小”。。。说的这段话是什么意思?字体还可以只转化我们需要用到的固定文字吗??还是说你这里用到的只是几个矢量图的字体?

    2018-05-10
    赞同
    回复
  • 哈罗哈皮
    哈罗哈皮
    2018-05-09

    话说,wepy,美团的mpvue等等,这些不是框架吗?

    2018-05-09
    赞同
    回复
  • 2018-05-09

    回2楼 小程序前端没有什么框架吧,后端用的KOA 。 github上面有腾讯云官方小程序后端代码,链接https://github.com/tencentyun/wafer2-startup

    2018-05-09
    赞同
    回复
  • 哈罗哈皮
    哈罗哈皮
    2018-05-09

    想问问,你做小程序使用了什么框架?

    2018-05-09
    赞同
    回复
  • One




.
    One .
    2018-05-08

    厉害厉害

    2018-05-08
    赞同
    回复
登录 后发表内容