ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

WebFontLoaderで外部Webフォントを読み込み、CreateJsで生成する文字に適用する。


スポンサーリンク


前の記事でFF14プレイヤー向けに記事を書きました。
blog.gelehrte.com

この中の技術がどのようにして行われているかをメモしておきます。

自作フォントをWebFontLoaderで読み込む

CSS

CSSではフォントを指定しているだけです。

@font-face{
font-family:'Norvrandt';
src:url('https://gelehrtecrest.github.io/norvrandt-font/fonts/Norvrandt-Regular.woff') format('woff');
}

JS

WebFontLoader

今回はCDNを使用してJSファイルをダウンロードしています。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

正しくは、GitHub上に公開されているwebfont.jsをダウンロードして使用した方が良いでしょう。
github.com

JavaScript側ではサンプルを参考にダウンロードを行いました。

        WebFont.load({
		custom: {
			families: ['Norvrandt'],
			urls: ['style.css']
		},
		loading: function() {
			console.log('loading');
		},
		active: function() {
			console.log('active');
		},
		inactive: function() {
			console.log('inactive');
		},
		fontloading: function(familyName, fvd) {
			console.log('fontloading', familyName, fvd);
		},
		fontactive: function(familyName, fvd) {
			console.log('fontactive', familyName, fvd);
		},
		fontinactive: function(familyName, fvd) {
			console.log('fontinactive', familyName, fvd);
		}
	});
CreateJS

CreateJsでCanvasに文字を指定する時にはフォント名を登録する必要があります。

new createjs.Text(テキスト, フォント, 色);

この時フォントは、ブラウザを起動しているPCのフォントが使用されるのですが、WebFontLoaderでダウンロードしたフォントも使用することが可能です。

まぁブラウザ上にフォントをダウンロードしているから当たり前といえばそうなのですが。
これで自作フォントを使用してのCanvas表示ができるようになりました。

応用例

Canvasで自作フォントが利用できるということは、Apple Watchなどに使われる小さなアプリでも自作フォントを使用することができるということです。
まだアプリ制作をためしていませんが、今後のための備忘録として記録を残しておきます。

今回はここまで。それでは。


スポンサーリンク