Pebble アプリで描画されるテキストは、さまざまな組み込みフォントまたはプロジェクト リソースとして指定されたカスタム フォントを使用して描画できます。
カスタム フォント リソースは .ttf(TrueType フォント)形式である必要があります。アプリがビルドされると、フォント ファイルは compatibility(Font Compatibility を参照)および characterRegex フィールド(Choosing Font Characters を参照)に従って SDK によって処理されます。後者は、結果のフォントの文字セットを記述する標準的な Python 正規表現です。
すべての組み込みシステム フォントは、fonts_get_system_font() で使用できます。サンプル画像を含む完全なリストについては、System Fonts - システムフォント一覧 を参照してください。コードで組み込みシステム フォントを使用する例は、以下に示します。
Pebble で利用可能なメモリ スペースの関係で、Bitham、Roboto、Droid、LECO フォントには制限があり、デフォルトの文字セットのサブセットのみが含まれています。
システム フォントの使用は、シンプルなテキストを表示する際に最も簡単な選択肢です。より高度なケースでは、カスタム フォントが有利な場合があります。システム フォントはいつでも取得でき、開発者は使用後にそれを破棄する責任はありません。フォントは 2 つのモードで使用できます:
// Use a system font in a TextLayer
text_layer_set_font(s_text_layer, fonts_get_system_font(FONT_KEY_GOTHIC_24));
// Use a system font when drawing text manually
graphics_draw_text(ctx, text, fonts_get_system_font(FONT_KEY_GOTHIC_24), bounds,
GTextOverflowModeWordWrap, GTextAlignmentCenter, NULL);
フォント ファイルをプロジェクトの resources ディレクトリに配置したら、カスタム フォントを package.json の media 配列の font type アイテムとしてプロジェクトに追加できます。name フィールドの内容は、コンパイル時に先頭に RESOURCE_ID_ を付けて使用できるようになり、目的のフォント サイズで終わる必要があります。
例:
"resources": {
"media": [
{
"type": "font",
"name": "EXAMPLE_FONT_20",
"file": "example_font.ttf"
}
]
}
推奨される最大フォント サイズは 48 です。
システムフォントとは異なり、カスタムフォントは開発者によって読み込まれ、アンロードされる必要があります。これが完了すると、フォントは同様の方法で簡単に使用できます。
アプリが初期化されるときに、生成された RESOURCE_ID を使用してリソースからフォントを読み込みます:
// Declare a file-scope variable
static GFont s_font;
// Load the custom font
s_font = fonts_load_custom_font(
resource_get_handle(RESOURCE_ID_EXAMPLE_FONT_20));
これで、フォントを 2 つのモードで使用できるようになりました - TextLayer を使用するか、LayerUpdateProc でテキストを手動で描画する場合です:
// Use a custom font in a TextLayer
text_layer_set_font(s_text_layer, s_font);
// Use a custom font when drawing text manually
graphics_draw_text(ctx, text, s_font, bounds, GTextOverflowModeWordWrap,
GTextAlignmentCenter, NULL);
フォント レンダリング プロセスは SDK 2.8 で改善されました。ただし、場合によっては、カスタム フォントの外観がわずかに変わる可能性があります。古いレンダリング プロセスに戻すには、package.json の media 配列(上記参照)のフォント オブジェクトに "compatibility": "2.7" を追加します。
デフォルトでは、フォント リソースに対してサポートされている文字の最大数が生成されます。ほとんどの場合、これは多すぎて、アプリのサイズを肥大化させる可能性があります。フォント リソースのサイズを最適化するには、標準的な正規表現(または「正規表現」)文字列を使用して、必要な文字のみに文字数を制限できます。
以下の表は、一般的なウォッチアプリのシナリオでフォント文字セットを制限するために使用するいくつかの例示的な正規表現を示しています:
| Expression | Result |
|---|---|
[ -~] |
ASCII 文字のみ。 |
[0-9] |
数字のみ。 |
[0-9 ] |
数字とスペースのみ。 |
[a-zA-Z] |
文字のみ。 |
[a-zA-Z ] |
文字とスペースのみ。 |
[0-9:APM ] |
時刻文字列のみ(例:「12:45 AM」)。 |
[0-9:A-Za-z ] |
時刻と日付の文字列(例:「12:43 AM Wednesday 3rd March 2015」)。 |
[0-9:A-Za-z° ] |
時刻、日付、温度計用の度記号。 |
[0-9°CF ] |
温度計用の「C」と「F」を含む数字と度記号。 |
package.json の media 配列内のフォント オブジェクトに characterRegex キーを追加します。
"media": [
{
"characterRegex": "[:0-9]",
"type": "font",
"name": "EXAMPLE_FONT",
"file": "example_font.ttf"
}
]
正規表現の使用方法の詳細については、regular-expressions.info をご覧ください。