サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

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


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日


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.