0

パスを使用してテキストのピクセル パーフェクト コピーを作成するエディターを作成しようとしています。SVG パスを作成するには、Raphael.js のprintメソッドを使用します。print問題は、関数をセットアップして、html 要素 (つまりスパン) のテキストとまったく同じにする方法を理解できないことです。

print呼び出しの例を次に示します。

var textPath = _r.print(0, 0, 'Default text', font1Cufon, 16, 'baseline', 0);

つまり、私はそのようなスパンを持っています:

<span class="text">Default text</span>

CSS:

.text {
    top: 0;
    left: 0;
    font-family: 'font1';
    font-size: 16px;
}

プロダクト コードではありませんが、主なアイデアは明らかだと思います。ほとんど機能しますが、2 つのタイプのテキストの間には多少のずれがあります。それらを同期する方法を知っている人はいますか？

4

1 に答える 1

1

残念ながら、SVG パス レンダリングと同じように、HTML テキスト レンダリング プロセスで使用されるフォント レンダリング エンジンを完全に制御することはできません。とりわけ、文字間隔、カーニング、アンチエイリアシング、サブピクセル アンチエイリアシング、さらには特定のフォント ファミリ グリフの選択にさえ、オペレーティング システム間だけでなくブラウザー間でも微妙な違いがある可能性があります。

一般的に、これは最善の方法です。ブラウザーのフォントは、通常、オペレーティング システム レベルでの全体的なフォント表示の選択と一致するように設計されています。やりたいことをかなり難しくしてくれることに感謝します。ほとんど機能しているものがあり、ブラウザ/OS/フォント設定を制御できる場合、1 つのオプションは、 lettering.jsで行われているように、すべての文字を手動で配置することです。

于 2013-03-21T15:04:24.820 に答える