「uniapp实战笔记」微信小程序设置字体的开发踩坑记录(微信小程序支持字体)

最近接到一个需求,需要在微信小程序中做出用户可自定义缩放旋转图片和文字定制功能,开发使用 uni-app,这里记录开发中遇到的几个问题。

「uniapp实战笔记」微信小程序设置字体的开发踩坑记录(微信小程序支持字体)

一、canvas设置字体大小的数值需为整数

使用 canvas 渲染文字时,需要设置文字的字体。

let ctx = uni.createCanvasContext('canvas')ctx.font = '16px Arial' // 设置成功ctx.font = '16.66px Arial' // 这样写会触发警告,不生效

二、字体集font-family兼容的问题

微信小程序中,对于文字字体集的兼容性很差。

IOS 端目前发现只有三种字体能设置成功('Arial', 'Courier New', 'Georgia')。

而 Android 端只有两种字体('serif', 'noto'),且 Android 端设置这两种字体只会在 canvas 中生效,在 DOM 中直接对文本设置这两种字体,没有任何变化。另外,在旧手机(非近一年内发布的新型号)上只会对英文生效。

针对以上问题,有两条路可以走:

一是直接重写一个 H5 页面,使用 webview 内嵌到小程序中(重写太繁琐);

二是按原路继续走,多做些兼容操作。

博主选了第二条路。IOS 端可以不理,系统对那三种字体基本兼容(针对英文)。

但对于Android端,博主首先是使用 uni.loadFontFace 尝试去引入 'serif', 'noto' 这两种字体供 DOM 渲染使用,但即便将字体挂到自己的 OSS 存储系统上进行加载,仍然没有效果。

「uniapp实战笔记」微信小程序设置字体的开发踩坑记录(微信小程序支持字体)

无奈,只能将 .ttf 字体文件转为 base64 引入,只保留英文后的两种字体加载下来,整个包大小只增加了 60KB。

参考链接:

Android 系统字体规范

(https://www.xueui.cn/download/font-download/android-font-down.html)

Noto 字体下载

Noto sans字体免费下载和在线预览-字体天下

字体文件转base64

Online @font-face generator — Transfonter

在线字体提取网站
在线字体提取工具,字体子集生成器 – 在线工具 – 字客网

将处理完需导入的字体放到 CSS 文件中,判断系统为 Android 时导入:

judgeSystem() { let system = uni.getSystemInfoSync().system // 系统信息 this.judgeTextHasCN() // 判断文字中是否存在中文(因设置字体只对英文生效) if (system.includes('Android')) { require('@/common/css/android-font.css') this.textFamilyList = ['serif', 'noto'] this.fontFamily = 'serif' } else { // 其他平台其实还包括windows this.textFamilyList = ['Arial', 'Courier New', 'Georgia'] this.fontFamily = 'Arial' }}

经过 base64 后的字体 CSS 大概长这样:

@font-face { font-family: 'serif'; src: url('data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTVq0Nk4AAG...') font-weight: normal; font-style: normal; font-display: swap;}

总结

不同平台对于字体的兼容都不同,其实最完美的方法还是使用 webview。

如果需要对中文也兼容,那还需引入相应的中文字体集,不过全部引入会导致包体积过大。但也有相应的方法,就是动态地对需要的文字做抽离,只引需要的文字,有机会下次再展开聊聊。

期继续给大家分享uni-app实战中的点点滴滴,敬请期待~

欢迎各位关注、留言,大家的支持就是我的动力!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月9日 上午9:29
下一篇 2024年5月9日 上午9:40

相关推荐

  • 建设工程项目管理台账

    建设工程项目管理台账 在建设工程项目管理中,建立一份完善的项目管理台账是非常重要的。它可以帮助项目经理对项目进行全面的管理和跟踪,确保项目按时、按质、按量完成。本文将介绍建设工程项…

    科研百科 2024年8月18日
    39
  • 一篇职称评审的专家推荐意见(一篇职称评审的专家推荐意见怎么写)

    这是高级职称评审时的一篇专家推荐意见,668个字。 XXX老师参加教育教学工作以来,热爱教育事业,工作勤恳,为人师表,具备良好的师风师德,在心理教育工作中取得了较好成绩。在日常教育…

    科研百科 2024年4月17日
    101
  • 档案管理业务

    档案管理业务 档案管理业务是指对文件、资料、文献等进行管理和保存的过程,对于企业、学校、政府机构等机构来说都是非常重要的一项工作。 随着现代社会的不断发展,档案管理业务也在不断地更…

    科研百科 2025年1月10日
    0
  • 项目工时管理app(项目工时管理 软件)

    项目工时管理软件:项目成功的利器 随着项目管理的日益复杂化,项目工时管理已经成为了项目管理中不可或缺的一部分。项目工时管理软件能够帮助项目经理更好地管理项目进度,提高项目的效率,从…

    科研百科 2024年9月2日
    35
  • 项目研发管理系统

    项目研发管理系统是一种用于管理项目研发过程的软件系统,能够帮助企业高效地组织和管理项目开发,提高项目质量和效率。本文将介绍项目研发管理系统的基本概念、功能和应用,以及如何提高其使用…

    科研百科 2024年12月13日
    0
  • 黑龙江天域双龙航空科技无人机项目开工(黑龙江天域双龙航空科技有限公司)

    东北网绥化8月21日讯(特约记者王可心) 8月18日上午,黑龙江天域双龙航空科技公司无人机项目在望奎县开发区开工。 副市长庞洪峰在仪式上讲话,望奎县主要领导,江苏天域航空科技集团及…

    科研百科 2024年4月10日
    93
  • 现代项目管理概论

    现代项目管理概论 项目管理在现代社会中扮演着越来越重要的角色。无论是组织大规模的工程项目,还是进行日常的日常管理工作,都需要通过有效的项目管理来实现目标和提高效率。本文将介绍现代项…

    科研百科 2024年7月28日
    50
  • 系统集成项目管理 中级

    系统集成项目管理中级:一场跨越技术和实践的管理技能提升 系统集成项目管理中级,是指在集成项目管理领域,拥有一定的技术基础和实践经验,能够运用项目管理的方法和技术,协助组织完成系统集…

    科研百科 2024年12月25日
    0
  • 工程项目管理常用工具

    工程项目管理常用工具 工程项目管理是现代项目管理中非常重要的一个方面,它涉及到项目计划、进度控制、成本预算、风险管理和质量管理等方面。在工程项目管理中,常用的工具包括项目管理工具、…

    科研百科 2024年9月23日
    23
  • 库存管理软件哪个好用?体验好的4大库存管理软件(库存管理软件推荐)

    库存管理工作对企业和中小商户来说,是至关重要的,而库存管理软件是进行库存管理必备的工具,可以有效帮助解决库存管理工作中,货物堆积多、出错率高、库存数据不清楚等问题。 在选择库存管理…

    科研百科 2023年8月28日
    154