node.js - 计算字体字形的确切大小

Question

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

我们使用 D3.js 创建一个带有标题、较小署名和较短正文的 SVG。差不多是这样:

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua

如本例所示，无论字体大小如何，我都需要文本左对齐。

问题是对齐的是每行边界框，而不是字形。这使得标题看起来缩进了。如何计算边界框和字形之间的空间，以便正确对齐文本？

一位同事坐下来手动测量了英文字体，效果很好。我们或许可以在 Adob​​e Illustrator 中执行此操作，但我们需要英文、中文和阿拉伯字体的信息。手动执行此操作或多或少是不可能的。

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

我认为理想的方法是使用 SVG 字体路径信息来查找极值，这样我们就可以获得准确的数字而不是估计值。我们的估计误差很大。有没有办法用 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 字体系列，我们使用的是自定义字体。我不认为英文字体是为网络使用而创建的。我们使用了 fontsquirrel.com创建 SVG 字体文件。

更新

SVG 字体似乎是最合乎逻辑的选择，因为文件中的所有路径信息都可以在 Node 中读取。你只需要解释它。但我们发现并决定使用 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
} */

编辑: 快速演示 here