计算字体字形的确切大小

Question

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

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

Lorem存有

Lorem ipsum dolor

Lorem存有悲坐阿梅德,
consectetur adipisicing ELIT,
sed的根本eiusmod tempor
incididunt UT labore等dolore
麦格纳aliqua

在这个例子中,无论font-size如何,我都需要左对齐文本.

问题是,每个线条边界框都是对齐的而不是字形.这使标题看起来缩进.如何计算边界框和字形之间的空间,以便我可以正确对齐文本？

一位同事坐下来手动测量了这个英文字体,效果非常好.我们可以在Adobe 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>

它是x和y价值观上text和tspan我们需要计算,其中的负面成分x特别值.注意:我们实际上并没有使用serif或sans-serif字体系列,我们使用自定义字体.我不认为英文字体是在创建Web时使用的.我们使用fontsquirrel.com来创建SVG字体文件.

更新

SVG字体似乎是最合理的选项,因为您可以在节点中读取文件中的所有路径信息.你只需要解释它.但我们发现,并决定一起去,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
} */

编辑：这里快速演示