pebble
  • Tutorials
  • Get the SDK
  • Guides
  • Documentation
  • Examples
  • Community
  • Blog
  • More
Privacy
Cookies
Publish

Guides

  • Table of Contents
  • App Resources
    • Animated Image - アニメーション画像
    • App Assets - アセット
    • Converting SVG to PDC
    • Fonts - フォント
    • Images - 画像
    • Pebble Draw Command File Format - PDCファイルについて
    • Platform-specific Resources - 特定のプラットフォーム向けリソースの設定
    • Raw Data Files - 生データ追加とその利用
    • System Fonts - システムフォント一覧
  • Appstore Publishing
  • Best Practices
  • Communication
  • Debugging
  • Design and Interaction
  • Events and Services
  • Graphics and Animations
  • Migrating Older Apps
  • Pebble Packages
  • Pebble Timeline
  • Rocky.js
  • Smartstraps
  • Tools and Resources
  • User Interfaces

Fonts - フォント

フォントの使用

Pebble アプリで描画されるテキストは、さまざまな組み込みフォントまたはプロジェクト リソースとして指定されたカスタム フォントを使用して描画できます。

カスタム フォント リソースは .ttf(TrueType フォント)形式である必要があります。アプリがビルドされると、フォント ファイルは compatibility(Font Compatibility を参照)および characterRegex フィールド(Choosing Font Characters を参照)に従って SDK によって処理されます。後者は、結果のフォントの文字セットを記述する標準的な Python 正規表現です。

システム フォント

すべての組み込みシステム フォントは、fonts_get_system_font() で使用できます。サンプル画像を含む完全なリストについては、System Fonts - システムフォント一覧 を参照してください。コードで組み込みシステム フォントを使用する例は、以下に示します。

制限事項

Pebble で利用可能なメモリ スペースの関係で、Bitham、Roboto、Droid、LECO フォントには制限があり、デフォルトの文字セットのサブセットのみが含まれています。

  • Roboto 49 Bold Subset - 数字とコロンが含まれます。
  • Bitham 34/42 Medium Numbers - 数字とコロンが含まれます。
  • Bitham 18/34 Light Subset - 一部の文字のみが含まれており、一般的なテキストの表示には適していません。
  • LECO Number セット - 数字のみの使用に適しています。

システムフォントの使用

システム フォントの使用は、シンプルなテキストを表示する際に最も簡単な選択肢です。より高度なケースでは、カスタム フォントが有利な場合があります。システム フォントはいつでも取得でき、開発者は使用後にそれを破棄する責任はありません。フォントは 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"
    }
  ]
}
Important

推奨される最大フォント サイズは 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 をご覧ください。

You need JavaScript enabled to read and post comments.

Overview

  • フォントの使用
  • システム フォント
  • 制限事項
  • システムフォントの使用
  • カスタム フォントの追加
  • カスタム フォントの使用
  • フォントの互換性
  • フォント文字の選択