关键词：
最近接到一个需求，需要在微信小程序中做出用户可自定义缩放旋转图片和文字的定制功能，开发使用uni-app，这里记录几个问题。
一、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存储系统上去加载，仍然没有效果。
无奈，只能将.ttf字体文件转为base64引入，只保留英文后的两种字体加载下来，整个包大小只增加了60KB。
参考链接：
Android系统字体规范
Noto字体下载
字体文件转base64
在线字体提取网站
将处理完需导入的字体放到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。如果至此还需对中文也兼容的话，那还需引入相应的中文字体集，不过全部引入的话会导致包体积过大，但是也有相应的方法，就是动态地对需要的文字做抽离，只引需要的文字（这里不做展开）。
uniapp开发微信小程序使用腾讯地图获取具体位置信息(代码片段)
先解释一下为什么要用腾讯地图实现自动定位？uniapp可以通过uni.getLocation获取用户定位，但是获取到的定位没有中文地址，所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。之所以使用腾讯... 查看详情
uniapp开发微信小程序使用腾讯地图获取具体位置信息(代码片段)
先解释一下为什么要用腾讯地图实现自动定位？uniapp可以通过uni.getLocation获取用户定位，但是获取到的定位没有中文地址，所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。之所以使用腾讯... 查看详情
uniapp开发微信小程序，从构建到上线(代码片段)
前言： 本文主要介绍uniapp的基础使用，以及使用uniapp在企业开发的过程中的一个详细流程，比较适合第一次使用uniapp开发微信小程序的伙伴，或者没有过实战经验的小伙伴参考；使用Hbuildx配合Uniapp框架... 查看详情
uniapp开发微信小程序自定义顶部导航栏(代码片段)
自定义导航栏渐变色，先上效果 使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色全局定义导航栏"window":"navigationBar... 查看详情
小程序地图uniapp开发微信小程序，显示地图功能，且点击后打开高德或腾讯地图。(代码片段)
...高德或者百度地图api之类的。其实完全没必要，使用uniapp自带的方法uni.openLocation即可。话不多说，完整代码、注释、以及开发中遇到的问题如下所示：1、uniapp打包成微信小程序后—配置app.json文件//开发过程中，... 查看详情
uni-app开发微信小程序使用微信小程序的插件(代码片段)
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件,插件地址如下：OCR插件申请方式见插件地址介绍。本文主要记录调用方式1.在manifest.json的“mp-weixin”里添加"plugins":"ocr-plugin":"version":"3.0.1",... 查看详情
uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）
...能实现。项目地址：https://github.com/chellel/wechat-editor-projectuniapp插件市场：https://ext.dcloud.net.cn/plugin?id=6365editor富文本编辑器组件官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/editor.html否则会受到小程序css影响。小程序本... 查看详情
uniapp微信小程序开启发送好友和朋友圈
...享功能——分享给好友或者是朋友圈的功能。找了一圈的uniapp文档，决定在这里记录一下，分享给有缘人使用。效果在微信小程序中，这个默认是关闭状态的如下：开启的正确方式onShareAppMessage(res)if(res.from===button)console.log(res.targ... 查看详情
uniapp微信小程序video视频监听播放时间(代码片段)
uniapp微信小程序video视频监听播放时间使用uniapp开发微信小程序，需要实现这样的需求当我用户离开页面的时候，我就要记录下用户视频播放的那个地方然后第二次进来，接着离开时候的地方播放uniapp中video提供的方... 查看详情
开发微信小程序要下载git吗
参考技术A你好，开发微信小程序不需要下载git。微信小程序管理后台只有一个管理员可以登录，可以同时绑定10个开发者和20个体验者，开发者们可以通过版本管理工具（比如SVN或者Git等）共同开发，但是向微信后台提交代码只... 查看详情
怎么使用sublime来开发微信小程序怎么预览
...方，最终运行结果还是得看官方的IDE，所以使用sublime开发微信小程序的流程是这样的：创建小程序项目，直接将整个项目文件夹拖入sublime，即可在sublime里面进行编辑，而官方的IDE就只是单纯用来调试用的！！！让代码提示加速... 查看详情
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件(代码片段)
...件，报错请设置key授权本小程序appId报错2前言因为开发微信小程序，所以我这里用的是腾讯地图选点插 查看详情
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件(代码片段)
...件，报错请设置key授权本小程序appId报错2前言因为开发微信小程序，所以我这里用的是腾讯地图选点插 查看详情
uni-app.11.开发微信小程序实现消息订阅(代码片段)
开发微信小程序实现消息订阅使用场景订阅消息一次性订阅消息长期订阅消息实现步骤1.获取模板ID2.uni.requestSubscribeMessage3.subscribeMessage.send4.测试使用场景在我们开发的小程序中司机首次登录需要先认证从业资质和车辆。司机在... 查看详情
开发微信小程序在html5中怎么实现的
小程序代码里可以嵌入h5制作页面的，也方便与公众号的页面相通。我是上次用了个叮铛应用的小程序制作平台，就是链接个页面而已，还是零代码，现在体验版测试没问题了，在审核中。参考技术A不解藏踪迹， 查看详情
django实战开发微信小程序项目教程
资源目录： 下载地址：百度网盘下载 查看详情
猿创征文｜基于appcube应用魔方：零代码手把手教你5分钟开发微信小程序
文章目录前言一、AppCube应用魔方1.1、什么是AppCube应用魔方？1.2、为什么选择AppCube应用魔方？二、项目实验环境与资源准备2.1、实验需求及环境介绍2.2、初次订购AppCube2.3、曾订购过AppCube三、进入AppCube全新零代码界面四... 查看详情
使用vscode开发微信小程序(代码片段)
.MathJax,.MathJax_Message,.MathJax_Previewdisplay:none使用VSCode开发微信小程序微信开发工具结构缺点VSCodeVSCode下载插件Chinese小程序开发助手Easylessminappvscodewxmlwechat-snippet中文乱码处理配置Easyless说明 微信开发工具说归说，但是开发微信... 查看详情