HTML5テクニカルノート

PreloadJS 1.0.0: FontLoader()コンストラクタ

ID: FN1709005
Technique: HTML5 / JavaScript
Library: PreloadJS 1.0.0

FontLoaderはPreloadJS 1.0.0に備わった新たなクラスで、フォントファイルやCSS定義およびCSSパスを読み込みます。

FontLoader()コンストラクタ
文法	FontLoader(loadItem: LoadItem \| Object)
概要	FontLoaderで項目読み込みのためのインスタンスをつくって返す。
引数	loadItem －読み込む項目の内容を定めるオブジェクト(設定できるプロパティについては`LoadItem`クラス参照)。

説明

FontLoaderクラスは、フォントファイルやCSS定義およびCSSパスを扱うローダーです。実際にフォントそのものをプリロードするのではなく、CSSの定義をつくったうえで、HTML5 Canvas要素におけるサイズ変更を確かめます。

なお、FontLoaderクラスは、タグベースの読み込みには対応していません^[*1]。CSSを読み込んで、フォントの定義を確かめて決めなければならないためです。

[*1] FontLoaderクラスのコンストラクタの定めをみると、第2引数(preferXHR)にXMLHttpRequestで読み込むかどうかのブール(論理)値を受け取っています。けれど、この引数値にかかわらず、内部的にXHRRequestクラスでロードされます。


function FontLoader(loadItem, preferXHR) {
	// ... [中略] ...
}

例

つぎのコードは、GoogleフォントRobotoを読み込んで、要素(element)に適用します。なお、同じコードを基本にしたサンプル001をjsdo.itに掲げました。


var loader = new createjs.FontLoader({
	src: 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic,700italic',
	type: 'fontcss'
});
loader.addEventListener('complete', function() {
	element.style.fontFamily = 'Roboto';
});
loader.load();

サンプル001■PreloadJS 1.0.0: Loading Google font

作成者: 野中文雄
作成日: 2017年7月27日