html文字用像素隔开,css – SVG或HTML中像素完美一致的文本宽度

请参阅

jsFiddle(或

hosted here)上的此演示：

>我有一个svg路径是粗糙的(99.99％)圆形

>沿着这条路径,我使用’textpath’svg元素放置文本

>我希望文本的结尾尽可能准确地与开头相遇(理想情况下像素完美),以便形成连续的文本循环

这是代码的摘录(删除所有文本值)：

version="1.1" viewBox="0 0 480 480" preserveAspectRatio="xMidYMid" height="100%"

width="100%">

/* for some reason, SVG font import doesn't work in Chrome or Firefox! */

@font-face {

font-family: Libertine;

src: url(LinLibertine_R.svg#LinLibertineO);

}

@font-face {

font-family: Libertine2;

src: url(LinLibertine_Rah.ttf);

}

/* Chrome seems to round to the nearest 0.5 em; also, does not display em-widths consistently with Firefox (though px-widths are consistent) */

.ex1 {

font: 0.85em Libertine2;

}

.measurement {

font: 1.0em monospace;

}

...

...

...

...

...

...

...

fill="none" stroke="red" stroke-width="0" />

fill="none" stroke="red" stroke-width="0" />

...

A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 G0 G1 G2 G3 G4 G5 G6 G8 G9

到目前为止,我能做的最好的事情是通过CSS导入字体,这大致标准化了浏览器的宽度.

请注意,Chrome不会读取微调的字体大小值(例如,它似乎将0.87em舍入到0.85em),并且似乎与Firefox有不同的文本呈现引擎,即使字体大小一致.例如,1em的字体大小将上面示例中的内部“测量圆圈”渲染为Firefox中的刻度“F9”中的F,其中Chrome几乎渲染到刻度“F4”的开头,这个问题减少到在字体大小中使用px单位时,单字符宽度差异.

您还会注意到Chrome错误地呈现从右到左(RTL)文本,并且手动CSS覆盖(使用’unicode-bidi’和’direction’指令)导致完全失败(根本没有SVG渲染).

不言而喻 – 有很多问题.到目前为止,这是一个有趣的实验,但任何标准化的帮助将不胜感激.

至于我自己的解决方案;我正在考虑使用LinuxLibertine svg-font中的字体规范手动指定每个字符的位置,这是一个非常俗气的替代方法,可以找出渲染不一致的根源.