CanvasのWebフォント描画で活用するCSS Font Loading API
- カテゴリー
- JavaScript >
- グラフィックス
全3回
Webフォントは通常の利用ならば、各フォント配信サービスが提供するコードで指定するという方法で利用できますが、Canvasへの描画の場合などはいくつか考えなくてはならない点があります。CanvasへのWebフォント描画を題材に、Webフォントの基本や、APIを利用した制御まで解説します。
最終回 Canvasへの日本語Webフォントの適用と実例
本シリーズの1回目と2回目で、Canvas描画時におけるWebフォントの適用や、日本語Webフォント利用時に必要な最適化を解説してきました。これらを踏まえ、日本語WebフォントをCanvas描画に利用する方法を考えます。
第2回 日本語Webフォントの読み込み処理の最適化
データ容量が大きくなる日本語Webフォントを使う場合、その読み込み方法にも工夫が必要です。CanvasでWebフォントを扱う前に、まずは、unicode-rangeデスクリプタの仕組みを活かした読み込み方法を理解しましょう。
第1回 CanvasへのWebフォントの適用
CanvasでWebフォントを使うには、Webフォントの読み込み制御が必要となりますが、その実装にはWebフォントの仕組みを理解する必要があります。前編ではWebフォントの仕組みと、それに対するブラウザの対応を理解し、CanvasへWebフォントを適用してみます。