4

jsFiddleでこのデモを参照してください(またはここでホストされています):

  • 私は大雑把に（99.99％）円形のsvgパスを持っています
  • このパスに沿って、'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 は微調整された font-size 値を読み取らず (たとえば、0.87em を 0.85em に丸めるように見える)、フォント サイズが一貫している場合でも、Firefox とは異なるテキスト レンダリング エンジンを使用しているように見えることに注意してください。たとえば、1em の font-size は、上記の例の内側の「測定円」を Firefox の目盛り「F9」の F にレンダリングします。Chrome は目盛り「F4」のほぼ先頭までレンダリングします。問題は次のように縮小されます。 font-size で px 単位が使用されている場合は、1 文字幅の差。

また、Chrome が右から左 (RTL) のテキストを正しくレンダリングせず、手動の CSS オーバーライド (「unicode-bidi」および「direction」ディレクティブを使用) が完全な失敗 (SVG レンダリングがまったくない) を引き起こしていることにも気付くでしょう。

言うまでもなく、多くの問題があります。これまでのところ、これは楽しい実験でしたが、標準化の助けになれば幸いです。

私自身の解決策に関しては。LinuxLibertine svg-font のフォント仕様を使用して、各文字の位置を手動で指定することを考えています。これは、レンダリングの不一致の原因を突き止めるための非常に厄介な代替手段です。

4

1 に答える 1

1

純粋に SVG と TTF のみに依存する場合の問題は、Webkit 以外のブラウザーでピクセルの完全性の問題が発生することです。それらのいくつかはまったくレンダリングされません。（愚かなIE7）。100% 完璧というわけではありませんが、Fontsquirrel のジェネレーターは、ほとんどの場合、私の Web フォントで 99% 成功しています。

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

私の経験則では、特定のブラウザには次の形式を使用します。SVG/TTF を使用するだけの 2 倍の作業のように思えますが、実際にはそうではなく、ピクセルの完全性に関しては頭痛の種が大幅に軽減されます。

TTF - ほとんどのブラウザーに適していますが、IE と iOS Safari にはありません。
EOT - IE のみ。
WOFF - 圧縮された新しい標準。
SVG - iPhone/iPad。

この CSS は、1 つのファミリのすべての形式をカバーします。

@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>

これが役に立てば幸いです。または、さらに混乱させるだけではありません。:/ 私はそうする傾向があります。

于 2013-03-01T14:11:18.497 に答える