根据 CSS 测量文本宽度而不渲染它

Question

我想测量一些待渲染文本的理论宽度。

我喜欢 this method 获取文本宽度，因为它不会改变 DOM

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

我有CSS字体描述

.dx-widget {
    color: #333;
    font-weight: 400;
    font-size: 14px;
    font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
    line-height: 1.35715;
}

如何根据这些 CSS 规则获得 JavaScript 不同字符串的宽度？

我不认为我可以将此 CSS class 应用到 canvas 以使其工作。

Answer 1

好的。我创建了一个片段。

通过将虚拟元素样式（或真实元素的样式）分配给变量，更容易更正代码。在任何浏览器的开发人员工具的控制台中，您可以输入变量的名称并查看所有属性。

测试它是否适合你-使用它;)

或者如 Stephen P 在评论中所建议的那样 - 创建一个新的空跨度，您不必冒险更改一些真实的可见元素:)

给他的评论投票。进步很大。

var stylee=document.getElementById('test_element').style;
stylee.color="#333";
stylee.fontWeight="400";
stylee.fontSize="14px";
stylee.fontFamily='"Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif';
stylee.lineHeight="1.35715";

function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

document.getElementById('result').innerText=getTextWidth('some text or variable', stylee);

<span id="test_element"></span>
<div id="result"></div>

Answer 2

通过阅读 https://developer.mozilla.org/en-US/docs/Web/CSS/font 我了解到 .font 实际上可以指定 CSS 中的所有信息。

line-height must immediately follow font-size, preceded by "/", like this: "16px/3"

font-weight must precede font-size

font-family must be the last value specified

所以这个CSS

font-weight: 400;
font-size: 14px;
font-family: "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;
line-height: 1.35715;

可以压缩成

font: 400 14px/1.35715 "Helvetica Neue","Segoe UI",helvetica,verdana,sans-serif;

并且属性值可以在原始 canvas getTextWidth 函数中使用。

根据 CSS 测量文本宽度而不渲染它

Measure text width according to CSS without rendering it

html

javascript

css

canvas