Question

我正在使用Bravura音乐字体。

这是它的字体定义：

<font-face 
    font-family="Bravura"
    font-weight="400"
    font-stretch="normal"
    units-per-em="2048"
    panose-1="5 6 0 0 0 0 0 0 0 0"
    ascent="1638"
    descent="-410"
    bbox="-889 -4080 4749 4120"
    underline-thickness="102"
    underline-position="-102"
    unicode-range="U+0020-1D1DD"
  />

我试图围绕字体指标。我已经研究过this site的解释：但我还不清楚。

我的目标是使用SVG符号viewBox属性将字形转换为正确缩放的SVG路径。

因此EM平方（包围每个字形的假想方块）是2048x2048单位（由每个单位定义）。一个单位是1/72英寸。我的显示器DPI是96x96

将其转换为像素= 2048 * 96/72 = 2730 1/3 x 2730 1/3

（如果我在这里，请告诉我）

所以每个字体应该原生地适合2730 1/3 x 2730 1/3方格？

边界框#s如何适应这个过程？ bbox单位是否也是字形单位？（1/72 in）

下面的bbox值是否应该直接输入到符号的viewBox属性中？

我是否需要考虑上升和下降值？

这是一个有点展示我的问题的jsfiddle：http://jsfiddle.net/1wqa384u/5/

任何资源或帮助表示赞赏。

Answer 1

em盒包含了上升和体面。请注意ascent-descent=2048。

关于你的主要问题，我认为你有点困惑自己。 viewBox告诉浏览器如何缩放符号以适合引用它的<use>指定的大小。

因此，如果我理解你想要的是什么，你的符号viewBox就应该是"0 0 2048 2048"。

然后你应该能够通过引用它，比如说12pt，就像这样引用它：

<use xlink:href="#mysymbol" x="100" y="100" width="12pt" height="12pt"/>

您不必担心自己进行DPI转换。

如何使用SVG符号viewBox正确缩放SVG字体的字形

1 个答案: