投稿者 tel | 2013年11月3日

WebFontLoaderでGoogle FontsのWebフォントを読み込む

WebFontLoaderを使ってGoogle FontsのWebフォントを読み込んでCanvasにレンダリングする。

最初から使うフォントが決まっているならWebフォントのリンクを入れるだけでいいけどフォントを選択してレンダリングしたいので。

詳しい使い方は上記のサイトに書いてある。簡単な使い方は以下のようになる。fontのところは配列で複数の種類のフォント名を入れられるみたい。
activeにフォントがロードされた時のコールバック、inactiveにロードに失敗した時のコールバックを指定する。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>

 

function load(font) {
	WebFont.load({
		google: {
			families: [font]
		},
		active: render,
		inactive: render
	});
}
load('Russo One');

フォントのテクスチャをブラウザで生成するのを作ってみた。
WebフォントでCavansに文字を描く

font_tex_ss


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。