安卓手机调整系统字体大小之后影响html2canvas中的文字

一、发现问题之前做的h5项目中使用html2canvas给图片加水印的功能，查看用户上传的图片时发现文字拥挤字体变大，尝试了扁宽和细长的图片都没能复现，灵机一闪：会不会不是图片的问题，是不是系统字体影响的？（我可真是bug杀手）。设置系统字体特大号之后果然出现了略显拥挤的文字。二、解决问题既然找到了问题就好办了。ios中调整系统字体不会影响html2canvas，可以加以下样式以防万一：body

无敌无敌小可爱

1324人浏览 · 2021-05-27 17:16:00

无敌无敌小可爱 · 2021-05-27 17:16:00 发布

一、发现问题

之前做的h5项目中使用html2canvas给图片加水印的功能，查看用户上传的图片时发现文字拥挤字体变大，尝试了扁宽和细长的图片都没能复现，灵机一闪：会不会不是图片的问题，是不是系统字体影响的？（我可真是bug杀手）。设置系统字体特大号之后果然出现了略显拥挤的文字。

拥挤的文字

二、解决问题

既然找到了问题就好办了。ios中调整系统字体不会影响html2canvas，可以加以下样式以防万一：

body {
  -webkit-text-size-adjust: 100% !important;
}

安卓手机就略微的麻烦一些，需要获取系统的字体大小计算比例重新设置想要的字体大小：

const ua = navigator.userAgent.toUpperCase()
const isAndroid = ua.includes("ANDROID")

if (isAndroid) {
  // 安卓手机调整字体大小，防止系统字体设置过大/过小之后水印字过于拥挤/宽松
  const $dom = document.querySelector(".watermark-text") // 获取水印文字元素
  const originFontSize = 14 // 正常应有的字体大小（依自己项目而定）
  const scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue("font-size")) // 系统的字体大小
  const scaleFactor = originFontSize / scaledFontSize // 计算比例
  $dom.style.fontSize = parseInt(originFontSize * scaleFactor) + "px" // 重新设置文字大小
  // 稍微处理一下文字间距
  if (scaledFontSize > originFontSize) {
    $dom.style.letterSpacing = (1.5 + Math.ceil(scaledFontSize / originFontSize)) + "px"
  } else {
    $dom.style.letterSpacing = -Math.ceil(scaledFontSize / originFontSize) + "px"
  }
}

更多详细讲解可查看axl234同学的移动端用户设置字体放大导致的问题

搞定！如果本文对你有些许帮助，动动手指点个赞吧，你的鼓励是我创作的动力，笔芯♥。