3

カスタム フォントを埋め込むときに、Easel JS を使用すると、ブラウザによってテキストの位置が大きく異なって見えるという問題がいくつかあります。

たぶん行の高さだと思いますが、私の知る限りEaselJSでこれを制御する方法はありません。

line-heightCSS および font-face 宣言で body の他のいくつかのプロパティと同様に変更を試みましたが、成功しませんでした!

フォント

ご覧のとおり、問題を引き起こしているのは Firefox だけです。また、複数のモバイルおよびタブレット デバイス、iOS および Android (Chrome、Safari、および Android ネイティブ ブラウザ) でも正しく表示されます (Chrome、IE、Safari など)。

以前のプロジェクトでは、Firefox を検出し、バランスをとるために x 位置を低く設定しましたが、回避策ではなく解決策を探しています!

編集:私はこれに出くわしました

しかし、HTML にテキストがあり、EaselJS によってキャンバスにレンダリングされていない場合、ブラウザ間に違いはありません!

4

1 に答える 1

6

描画コンテキスト (キャンバス) では、次のフォント属性を使用できます。

  • font は、CSS フォント規則に入れるものなら何でもかまいません。これには、フォント スタイル、フォント バリアント、フォントの太さ、フォント サイズ、行の高さ、およびフォント ファミリが含まれます。
  • textAlign は、テキストの配置を制御します。これは、CSS の text-align ルールに似ています (ただし同一ではありません)。可能な値は、開始、終了、左、右、および中央です。
  • textBaseline は、開始点に対するテキストの描画位置を制御します。可能な値は、top、hanging、middle、alphabetic、ideographic、または bottom です。

キャンバスに描画するときは、textBaseline を明示的に設定します (js):

context.textBaseline = "alphabetic";

http://diveintohtml5.info/canvas.html

テキストレンダリング宣言を試しましたか? (CSS)

text-rendering: geometricPrecision;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

免責事項：コードを提供していないため、これらは単なる推測です。

于 2013-09-19T07:10:21.527 に答える