问题描述
我正在使用Bravura音乐字体.
I'm utilizing the Bravura music font.
这是它的字体定义:
<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"
/>
我正在努力围绕字体指标.我已经研究了此网站上的解释:但是我我还不清楚.
I'm trying to wrap my head around font metrics. I've studied the explanation on this site: But I'm still unclear.
我的目标是使用SVG符号将字形转换为正确缩放的SVG路径 viewBox 属性.
My goal is to translate the glyphs into a properly scaled SVG path using an SVG symbol viewBox attribute.
因此EM正方形(是包围每个字形的虚构正方形)为2048x2048单位(由单位/em定义).单位是1/72英寸.我的显示器DPI是96x96
So the EM square (which is an imaginary square enclosing each glyph) is 2048x2048 units (defined by units-per-em). A unit is 1/72 of an inch. My monitor DPI is 96x96
将其转换为像素= 2048 * 96/72
= 2730 1/3 x 2730 1/3
Converting this to pixels = 2048 * 96/72
= 2730 1/3 x 2730 1/3
(让我知道我是否在这里)
(Let me know if I'm off here)
因此,每种字体都应该自然地适合2730 1/3 x 2730 1/3
正方形吗?
So each font should natively fit into a 2730 1/3 x 2730 1/3
square?
边界框如何适合此过程? bbox单位也是字形单位吗? (1/72 in
)
How does the bounding box #s fit into this process? Are the bbox units in glyph-units as well? (1/72 in
)
下面的bbox值是否应直接输入到符号的viewBox属性中?
Should the bbox value below be directly inputted into the viewBox attribute of a symbol?
我需要考虑上升和下降值吗?
Do I need to consider ascent and descent values?
这是一个jsfiddle,多少证明了我的问题: http://jsfiddle.net/1wqa384u/5/
Here is a jsfiddle somewhat demonstrating my issue: http://jsfiddle.net/1wqa384u/5/
任何资源或帮助表示赞赏.
Any resources or help appreciated.
推荐答案
em框包含上升和下降的位置.请注意ascent-descent=2048
.
The em box encompasses the ascent and decent. Notice that ascent-descent=2048
.
关于您的主要问题,我认为您有点困惑. viewBox告诉浏览器如何缩放符号以适合引用它的<use>
指定的大小.
As for your main question, I think you are confusing yourself a bit. The viewBox tells the browser how to scale the symbol to fit the size specified by the <use>
that references it.
因此,如果我正确理解您的要求,则符号viewBox应该仅为"0 0 2048 2048"
.
So if I understand what you want correctly, your symbol viewBox should just be "0 0 2048 2048"
.
然后,您应该可以像这样引用它,以例如12pt的比例绘制它:
You should then be able to draw it at, say 12pt, by referencing it like so:
<use xlink:href="#mysymbol" x="100" y="100" width="12pt" height="12pt"/>
您不必担心自己进行DPI转换.
You shouldn't have to worry about doing your own DPI conversion.
这篇关于如何使用SVG符号viewBox正确缩放SVG字体的字形的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!