WebFontLoaderで外部Webフォントを読み込み、CreateJsで生成する文字に適用する。WebFontLoaderで外部Webフォントを読み込み、CreateJsで生成する文字に適用する。2019-10-11WebFontLoaderで外部Webフォントを読み込み、CreateJsで生成する文字に適用する。ノルヴラント文字ジェネレータスポンサーリンク前の記事でFF14プレイヤー向けに記事を書きました。blog.gelehrte.comこの中の技術がどのようにして行われているかをメモしておきます。自作フォントをWebFontLoaderで読み込むCSSCSSではフォントを指定しているだけです。format('woff');}JSWebFontLoader今回はCDNを使用してJSファイルをダウンロードしています。src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>正しくは、GitHub上に公開されているwebfont.jsをダウンロードして使用した方が良いでしょう。github.comJavaScript側ではサンプルを参考にダウンロードを行いました。fvd);}});CreateJSCreateJsでCanvasに文字を指定する時にはフォント名を登録する必要があります。色);この時フォントは、ブラウザを起動しているPCのフォントが使用されるのですが、WebFontLoaderでダウンロードしたフォントも使用することが可能です。ブラウザ上にフォントをダウンロードしているから当たり前といえばそうなのですが。これで自作フォントを使用してのCanvas表示ができるようになりました。Watchなどに使われる小さなアプリでも自作フォントを使用することができるということです。アプリ制作をためしていませんが、今後のための備忘録として記録を残しておきます。