计算字体字形的确切大小 [英] Calculate the exact size of a font glyph

问题描述

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

I need a way to find the exact size and position of a glyph relative to its bounding box.

我们使用D3.js创建一个SVG标题，较小的旁注和较短的正文。很多这样：

We're using D3.js to create an SVG with a heading, a smaller byline and a short body text. Pretty much this:

Lorem ipsum

Lorem ipsum dolor

Lorem ipsum dolor sit amet，

consectetur adipisicing elit，

sed do eiusmod tempor

incididunt ut labore et dolore

magna aliqua

Lorem ipsum

Lorem ipsum dolor

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

在这个例子中，我需要将文本左对齐而不管字体-size。

As in this example, I need the text to be left-aligned regardless of font-size.

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

The problem is that it is each lines bounding box that's aligned and not the glyphs. Which makes the headings look indented. How can I calculate that space between the bounding box and the glyph so I can correctly align the text?

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

A colleague sat down and manually measured this for the English font, which works pretty well. We could probably do this in Adobe Illustrator, but we need the information for English, Chinese and Arabic fonts. To do this by hand is more or less impossible.

我可以想出的唯一解决方案是在canvas元素中输入每个字符，并映射每个像素来查看

The only solution I can come up with is to type each character in a canvas element and map each pixel to see where the glyph starts and ends.

我认为最理想的方式是使用SVG字体路径信息来找到极值，这样我们就可以得到确切的数字而不是估计。我们的估计有很大的误差。有什么方法可以做到这一点与node.js？

What I think would be ideal is a way to use the SVG font path information to find the extremes, that way we would get the exact numbers instead of estimates. Our estimates have a big margin of error. Is there a way to do that with node.js?

SVG看起来像一个例子：

An example of what the SVG looks like:

<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 和<$ c在我们需要计算的文本和 tspan 元素上的$ c> y 负值 x 值。注意：我们实际上不使用 serif 或 sans-serif 字体系列，我们使用自定义字体。我不认为英语字体是创建与web使用的心。我们使用 fontsquirrel.com 创建SVG字体文件。

It is the x and y values on the text and tspan elements we need to calculate, the negative x values in particular. Note: we don't actually use the serif or sans-serif font families, we use a custom font. I don't think the English font is created with web use in mind. We used fontsquirrel.com to create the SVG font file.

SVG字体看起来像是最合理的选择，因为您可以在节点中读取文件中的所有路径信息。你只需要解释它。但我们发现，并决定与之配合， opentype.js 可与otf和ttf字体配合使用。

SVG fonts seemed like the most logical option, since you have all the path information in the file readable in node. You'd just have to interpret it. But we found, and decided to go with, opentype.js which works with otf and ttf fonts.

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

I'd still like to know if this is at all possible to do with SVG fonts.

推荐答案

我认为这可以做你想要的。注意它需要jQuery和有点hacky。您可以在css对象中设置行高。

I think this may do what you want. Note that it requires jQuery and is a bit hacky. You may want to set line-height in the css object.

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
} */

编辑：快速演示这里

这篇关于计算字体字形的确切大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！