Question

我正在显示歌词和和弦，我想采用这种原始格式：

[Dm]Hello darkness my old [C]friend

将和弦放在歌词上方。我可以通过将每个单词都设为div，并使和弦相对于该单词绝对/相对来实现此目的，但是这意味着人们无法将所有内容复制并粘贴到诸如Word的WYSIWYG编辑器中。

因此，我想在歌词的上方加一行空格，如下所示：

Dm                    C
Hello darkness my old friend

使用等宽文本很容易，但是我想使用Arial / Times之类的字体。 有没有一种方法可以计算出多少空格近似于某些文本的长度？

注意-在每个人都说“哦，您应该使用其他方法来显示和弦”之前，我尝试了几种方法，但是我正在寻找一种可以复制和粘贴而不丢失和弦位置的东西

Answer 1

CanvasRenderingContext2D界面具有文本度量方法measureText，可用于获取文本宽度。

它有两个参数，要测量的文本和CSS font值。

此过程中使用的canvas元素不必是文档的一部分，也不必具有仅使用measureText的width或height属性。

概念示例：

"use strict";

const ctx = document.createElement("CANVAS").getContext("2d");

function getTextWidth(text, cssFont) {
    ctx.font = cssFont;
    var o = ctx.measureText(text);
    return o.width;
}

var cssFont = "14px Arial";
var spaceWidth = getTextWidth( "          ", cssFont) / 10;
var lyric = "Hello darkness my old "
var lyricWidth = getTextWidth("Hello darkness my old ", cssFont);

console.log('"' + lyric + '"' + " width is " + lyricWidth);
console.log("space width is " + spaceWidth);
console.log("So the lyric width is " + lyricWidth/spaceWidth + " spaces");

计算数字空间以近似一行文本

1 个答案: