js获取文字渲染实际宽度

6651次浏览

前言

文字的宽高,不同字体渲染不一样,如何获取字体字号单个文字的实际占用的宽度呢?今天介绍两种方式。

方案一,dom宽度获取

用真实的dom做渲染,然后获取dom的宽度,计算得到最终的准确的字符像素长度。

span方法如下:

  function getStringPixelWidthSpan(text, font) {
      const span = document.createElement('span');
      document.body.appendChild(span);
      span.style.position = 'absolute';
      span.style.whiteSpace = 'nowrap';
      span.style.font = font;
      span.textContent = text;
      const width = span.offsetWidth;
      document.body.removeChild(span);
      return width;
    }

使用如下:

getStringPixelWidthSpan('haoRooms博客',' 20px Microsoft YaHei')

方案二,canvas获取

function getTextWidth(text, font) {
  // 创建一个临时的canvas元素
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  // 设置字体样式
  context.font = font;

  // 测量文本的宽度
  var width = context.measureText(text).width;

  // 返回文本的宽度
  return width;
}

使用:

getTextWidth('haoRooms博客',' 20px Microsoft YaHei')

获取页面字体

可以通过如下方式获取页面字体

 function getPageFont() {
        // 获取<html>元素的样式
        const htmlStyles = window.getComputedStyle(document.documentElement);

        // 获取font-family属性值
        const fontFamily = htmlStyles.getPropertyValue('font-family');

        return fontFamily;
    }

获取效率canvas 和 span 时间对比

  // Test data
    const textArray = ["你好,世界!", "Hello, World!", "こんにちは、世界!", "안녕하세요, 세상!"];
    const font = "16px Arial";

    // Performance test
    function testPerformance(methodName) {
      const startTime = performance.now();

      for (let i = 0; i < 1000; i++) {
        textArray.forEach((text) => {
          if (methodName === 'canvas') {
            getTextWidth(text, font);
          } else if (methodName === 'span') {
            getStringPixelWidthSpan(text, font);
          }
        });
      }
      // document.body.removeChild(span);
      const endTime = performance.now();
      const duration = endTime - startTime;
      console.log(`${methodName} method took ${duration.toFixed(2)} milliseconds.`);

    }

// Run performance tests
testPerformance('canvas');
testPerformance('span');

  1000个时间对比
   canvas method took 10.50 milliseconds.
    span method took 375.50 milliseconds.

结论

canvas的效果目前看是最好的,推荐使用canvas来获取文字渲染实际宽度。

相关文章: