キャンバスに描画されるすべてのテキストにMyriadProを使用する必要があります。私は次のようにCSSを介してフォントをロードしています:
@font-face { font-family: MyriadProRegular; src: url('/fonts/MyriadPro-Regular.otf'); }
そして、このように私のキャンバスに設定しようとしています:
this.context.font = "16pt MyriadProRegular";
問題は、フォントが割り当てられていないことです。すべてのテキストが正しく描画されますが、フォントが間違っています。ただし、「MyriadProRegular」を標準のWebフォントに変更すると、評価は機能します。
私はこれらの2つの投稿ですべての解決策と提案を試しました: HTML 5キャンバスフォントは無視されます、 HTML5キャンバスの 外部フォントですが、どれも役に立ちませんでした、そしてそれらの古い投稿に新しい答えが来ることはないようです。
私のcssやフォント自体に問題はないことを知っています。ユーザーがフォームに入力して開始を押した後、JSを介してキャンバスが作成され、そのフォームはMyriadProを問題なく使用します。
キャンバスでフォントを使用するにはどうすればよいですか?