计算字体字形的确切大小

我需要一种方法来查找相对于其边界框的字形的确切大小和位置。

我们使用D3.js创build一个标题，一个较小的字体和一个短的正文文本的SVG。 非常多这个：

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor坐amet，
consectetur adipisicing elit，
sed做eiusmod tempor
incididunt ut labore et dolore
magna aliqua

正如在这个例子中，我需要文字左alignment，无论字体大小。

问题是它是alignment的每个行边界框，而不是字形。 这使标题看起来缩进。 如何计算边界框和字形之间的空间，以便我可以正确地alignment文本？

一位同事坐下来，手动测量了英文字体，效果很好。 我们可以在Adobe Illustrator中做到这一点，但我们需要英文，中文和阿拉伯文字体的信息。 手工操作或多或less是不可能的。

我可以想出的唯一解决scheme是在canvas元素中键入每个字符，并映射每个像素以查看字形开始和结束的位置。

我认为最理想的是使用SVG字体path信息来find极值，这样我们就可以得到确切的数字而不是估计值。 我们的估计有一个很大的误差。 有没有办法做到这一点node.js？

SVG的一个例子是：

<svg viewBox="0,0,1008,1424" height="1052px" width="744px" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(50,150)" class="container"> <g transform="translate(0,205)" class="textContainer"> <g fill="white" font-family="serif" font-size="" class="header"> <text> <tspan y="147.7104222717285" style="" font-size="208" x="-21.8359375">Lorem ipsum</tspan> </text> <text> <tspan y="201.46275431823733" style="" font-size="45" x="-4.72412109375">Lorem ipsum dolor</tspan> </text> </g> <g lengthAdjust="spacingAndGlyphs" textLength="297" fill="white" transform="translate(0,214)" font-family="sans-serif" class="paragraph" font-size="14"> <text y="16.8" x="0">Lorem ipsum dolor sit amet,</text> <text y="33.6" x="0">consectetur adipisicing elit,</text> <text y="50.4" x="0">sed do eiusmod tempor</text> <text y="67.2" x="0">incididunt ut labore et dolore</text> <text y="84" x="0">magna aliqua</text> </g> </g> </g> </svg> 

这是我们需要计算的text和tspan元素上的x和y值，特别是负x值。 注意：我们实际上不使用serif或sans-serif字体系列，我们使用自定义字体。 我不认为英文字体是在networking使用的基础上创build的。 我们使用fontsquirrel.com来创buildSVG字体文件。

更新

SVG字体似乎是最合乎逻辑的选项，因为在节点中可以读取文件中的所有path信息。 你只需要解释它。 但我们发现，并决定去与opentype.js与otf和ttf字体的作品。

我仍然想知道这是否完全可能与SVG字体。

Answer 1

我想这可能会做你想要的。 请注意，它需要jQuery，有点hacky。 你可能想要在CSS对象中设置行高。

 function glyphSize(glyph,css){ var span = $('<div>'); span.text(glyph); span.css({ display:'inline-block', position:'fixed', top:'100%' }).css(css); $('body').append(span); var out = { width:span.width(), height:span.height() } span.remove(); return out; } var size = glyphSize('a',{ 'font-family':'fantasy, sans-serif' // css to apply to the test element }); /* size = { width:7, height:20 } */ 

编辑：快速演示在这里

Answer 2

看到你的问题，并自己有问题。 在我看来，我解决这个问题非常简单。 我刚刚创build了一个不透明度为0.0的新文本元素。 我把它添加到svg，获取bbox并将其删除。 bbox包含宽度和高度：

 getBBox : function(svgId, text, styleClass) { // Add tmp text element to the SVG var tempSvgTextElement = d3.select("#" + svgId) .append("text") .style("opacity", 0.0) .attr("class", styleClass); var tSpanTextNode = document.createTextNode(text); var svgTSpan = tempSvgTextElement.append("tspan").attr("class", styleClass).node(); svgTSpan.appendChild(tSpanTextNode); var bbox = tempSvgTextElement.node().getBBox(); tempSvgTextElement.remove(); return bbox; }