浏览器JS计算字符宽高

在开发中遇到了需要获取一段文字的长度的技术性需求，这篇文章将会讲述我是如何解决这样的问题的

浏览器环境下

解决方法一： SPAN标签

我最开始的解决方法是创建一个span元素，然后innerHTML设置文本在设置好样式后插入到body中，读取宽高

function getCharSize(char, style = {}){
    let {
        fontSize = "12px",
        fontFamily = "SimSun"
    } = style

    let span = document.createElement("span")
    span.style.font = `${fontSize} ${fontSize}`
    span.style.lineHeight = fontSize
    span.innerHTML = str
    document.body.appendChild(span)
    let rect = span.getBoundingClientRect()
    let width = rect.width
    let height = rect.height
    document.body.removeChild(span)
    return {
        width,
        height
    }
}

image

问题

不同浏览器的差异

不同浏览器获取的高度宽高有一些差别

chrome:

image

firefox:

image

不知道为何firefox的高总是比chrome高2px，但这个我们可以通过直接获取传入的fontSize作为高，这样就可以统一了
```
function getCharSize(char, style = {}){
    let {
        fontSize = 14,
        fontFamily = "SimSun"
    } = style
    /*其他操作*/
    return {
        width,
        height: fontSize
    }
}
```
image

浏览器对字体大小的限制

chrome默认最小字体为12px，基本是人尽皆知的

image

这里可以使用scale的方式实现

function getCharSize(char, style = {}){
    let {
        fontSize = 14,
        fontFamily = "SimSun"
    } = style
    
    /*其他操作*/
    let scale = fontSize / 20
    span.style.fontSize = `${20}px`
    span.style.transform = `scale(${scale})`
    span.style.display = "inline-block" //让scale生效
    /*其他操作*/
    return {
        width,
        height: fontSize
    }
}

image

优点

兼容几乎所有浏览器

缺点

会受一些潜在的全局样式影响

image

解决方法二：Canvas measureText函数

除了使用span来获取浏览器表现的大小这样直接的方式以外，还有可以通过使用canvasAPI的CanvasRenderingContext2D.measureText()方式来快速获取

const ctx = document.createElement('canvas').getContext('2d')
function getCharSizeByCanvas(char, style = {}){
    let {
        fontSize = 14,
        fontFamily = "SimSun"
    } = style
    
    ctx.font = `${fontSize}px ${fontFamily}`
    let text = ctx.measureText(char)
    let result = {
        height: fontSize,
        width: text.width
    }

    return result
}

问题

chrome浏览器存在BUG，如果canvas不在DOM树上设置字体大小小于12px时，字体大小会强制设置为12px


//setfont before append
const canvas1 = document.createElement('canvas')
canvas1.width = 100
canvas1.height = 100
const ctx1 = canvas1.getContext('2d')
ctx1.font = "8px Arial"
ctx1.fillText(ctx1.font, 0, 50)
document.body.appendChild(canvas1)

//set font after append
const canvas2 = document.createElement('canvas')
canvas2.width = 100
canvas2.height = 100
const ctx2 = canvas2.getContext('2d')
document.body.appendChild(canvas2)
ctx2.font = "8px Arial"
ctx2.fillText(ctx2.font, 0, 50)

image

代码整理

下面给出优化后的代码

方法一：span

let span = document.createElement("span")
span.style.positon = "ablsolute"

function getCharSize(char, style = {}){
    let {
        fontSize = 14,
        fontFamily = "SimSun"
    } = style
    
    let scale = fontSize / 20
    span.style.fontSize = "20px"
    span.style.fontFamily = fontFamily
    span.style.lineHeight = "0"
    span.style.transform = `scale(${scale})`
    span.style.display = "inline-block"
    span.innerHTML = char
    document.body.appendChild(span)
    let rect = span.getBoundingClientRect()
    let width = rect.width
    document.body.removeChild(span)
    return {
        width,
        height: fontSize
    }
}

方法二：canvas计算

let canvas = document.createElement('canvas')
canvas.style.positon = "ablsolute"
let ctx = canvas.getContext('2d')

function getCharSizeByCanvas(char, style = {}){
    let {
        fontSize = 14,
        fontFamily = "Arial"
    } = style
    document.body.appendChild(canvas)
    ctx.font = `${fontSize}px ${fontFamily}`
    document.body.removeChild(canvas)
    let text = ctx.measureText(char) // TextMetrics object
    ctx.fillText(char, 50, 50)
    let result = {
        height: fontSize,
        width: text.width
    }
    return result
}