Question

在jsFiddle（或hosted here）上查看此演示：

我有一个svg路径，是粗略的（99.99％）圆形
沿着这条路径，我使用'textpath'svg元素
我希望文本的结尾尽可能准确地与开头相遇（理想情况下像素完美），以便形成连续的文本循环

以下是代码的摘录（删除了所有文本值）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" viewBox="0 0 480 480" preserveAspectRatio="xMidYMid" height="100%"
width="100%">
    <defs>
        <style type="text/css">
            /* 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;
            }
        </style>
        <text id="day1">...</text>
        <text id="day2">...</text>
        <text id="day3">...</text>
        <text id="day4">...</text>
        <text id="day5">...</text>
        <text id="day6">...</text>
        <text id="day7">...</text>
    </defs>
    <g transform="translate(240,240)">
        <g transform="translate(-240,-240)">
            <circle r="1" cx="240" cy="27" fill="black" />
            <path id="circle" d="M 240,20 a 220,220, 0 1,1 -0.0001,0.0000 Z"
            fill="none" stroke="red" stroke-width="0" />
            <path id="inner-circle" d="M 240,40 a 200,200, 0 1,1 -0.0001,0.0000 Z"
            fill="none" stroke="red" stroke-width="0" />
            <text class="ex1" fill="black">
                <!-- this RTL text-along-path is displayed backwards (ie sdrawkcab) in
                Chrome; manual CSS overrides (e.g. unicode-bidi) cause blank/white screen
                -->
                <textPath xlink:href="#circle" method="stretch">...</textPath>
            </text>
            <text class="measurement" fill="grey">
                <textPath xlink:href="#inner-circle" method="stretch">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</textPath>
            </text>
        </g>
    </g>
</svg>

到目前为止，我能做的最好的事情是通过CSS导入一个字体，粗略地标准化浏览器的宽度。

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

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

不言而喻 - 有很多问题。到目前为止，这是一个有趣的实验，但是对标准化的任何帮助都将非常感激。

就我自己的解决方案而言;我正在考虑使用LinuxLibertine svg-font中的字体规范手动指定每个字符的位置，这是解决渲染不一致根源的一个非常俗气的替代方法。

Answer 1

纯粹依赖于SVG和TTF的问题是，您将在非webkit浏览器中遇到像素完美问题。其中一些甚至根本不会渲染。（Stoopid IE7）。虽然它不是100％完美，但Fontsquirrel的发生器在我的网页字体中大多数时候都是99％。

http://www.fontsquirrel.com/tools/webfont-generator

我的经验法则是针对特定浏览器使用以下格式。这似乎只是使用SVG / TTF的2倍，但实际上并非如此，并且在像素完美方面会让你如此头疼。

TTF - 适合大多数浏览器，但缺少IE和iOS Safari EOT - 仅限IE。
WOFF - 压缩的新兴标准。
SVG - iPhone / iPad。

此CSS将涵盖一个系列中的所有格式：

@font-face {
    font-family: 'Libertine';
    src: url('Libertine-webfont.eot');
    src: url('Libertine-webfont.eot?#iefix') format('embedded-opentype'),
         url('Libertine-webfont.woff') format('woff'),
         url('Libertine-webfont.ttf') format('truetype'),
         url('Libertine-webfont.svg#LibertineRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

然后连接HTML：

<style type="text/css" media="screen">
    .ex1 {font: 18px/27px 'Libertine', Arial, sans-serif;}
    }
</style>

希望这会有所帮助，或者不仅仅是让你感到困惑。：/我倾向于这样做。

SVG或HTML中像素完美一致的文本宽度

1 个答案: