2

テキストを含む SVG ドキュメントをレンダリングしようとしています。Chrome/FF/Safari ではすべて問題ありません。

ここに画像の説明を入力

しかし、Opera (v12.14、Mac OS X) ではフォントが非常に醜く見えます:

ここに画像の説明を入力

これは正常ですか、それとも何か間違っているのでしょうか? レンダリング品質を向上させることはできますか? コードは次のとおりです。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="30" font-family="Arial" font-size="12" font-weight="bold">123 xyz XYZ</text>
    <text x="10" y="50" font-family="Arial" font-size="12" font-weight="bold" fill="#666">123 xyz XYZ</text>
    <text x="10" y="70" font-family="Arial" font-size="12" font-weight="normal" fill="#444">123 xyz XYZ</text>
    <text x="10" y="88" font-family="Arial" font-size="10" font-weight="normal" fill="#444">123 xyz XYZ</text>
</svg>

私はもう試した：

  • を使用してフォントを埋め込む@font-face;
  • Arial 以外のフォントを使用する。
  • 設定text-rendering="optimizeLegibility"。

これはどれも役に立ちません。

編集

解決策は使用することですtext-rendering="geometricPrecision"（Erik Dahlströmの回答を参照）：

ここに画像の説明を入力

結果は他のブラウザーよりもまだ悪いですが、今のところ、Mac OS 用の Opera で得られる最高のもののようです。

また、コンテンツを両方向に 0.5px ずつ翻訳しようとしました。出力はわずかに変わりますが、一般的に品質は向上しません。

4

1 に答える 1

3

Mac の SVG 内のテキストでは、サブピクセル テキスト レンダリングが無効になっているようです。

回避策は、 を指定することtext-rendering="geometricPrecision"です。これにより、Opera は、テキストのレンダリングをプラットフォームに任せるのではなく、レンダリングにグリフ アウトラインを使用します。ただし、これは通常、パフォーマンスがわずかに低下する傾向があることに注意してください。また、 を使用geometricPrecisionしても Opera でのサブピクセル テキスト レンダリングは有効になりませんが、通常、テキストは少し異なって見えることに注意してください (通常、ピクセル グリッドの配置に応じてわずかにぼやけます)。

于 2013-03-01T14:39:08.797 に答える