次の方法で共有


Xamarin.Forms のフォント

既定では、Xamarin.Forms は各プラットフォームで定義されているシステム フォントを使用します。 ただし、テキストを表示するコントロールは、このフォントの変更に使用できるプロパティを定義します。

  • FontAttributes 型の FontAttributes は、NoneBoldItalic の 3 つのメンバーを持つ列挙です。 このプロパティの既定値は None です。
  • double 型の FontSize
  • string 型の FontFamily

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

フォント属性を設定する

テキストを表示するコントロールでは、フォント属性を指定する FontAttributes プロパティを設定できます。

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

同等の C# コードを次に示します。

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};    

フォント サイズを設定する

テキストを表示するコントロールでは、フォント サイズを指定する FontSize プロパティを設定できます。 FontSize プロパティは、double 値に直接設定することも、NamedSize 列挙値で設定することもできます。

<Label Text="Font size 24"
       FontSize="24" />
<Label Text="Large font size"
       FontSize="Large" />

同等の C# コードを次に示します。

Label label1 = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

または、Device.GetNamedSize メソッドには、2 番目の引数を Element として指定するオーバーライドがあります。

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Note

FontSize 値を double として指定すると、デバイスに依存しない単位で測定されます。 詳細については、「測定単位」を参照してください。

名前付きフォント サイズの詳細については、「名前付きフォント サイズについて」を参照してください。

フォント ファミリを設定する

テキストを表示するコントロールで、FontFamily プロパティをフォント ファミリ名 ("Times Roman" など) に設定できます。 ただし、これは、そのフォント ファミリが特定のプラットフォームでサポートされている場合にのみ機能します。

プラットフォームで使用できるフォントの派生を試みるために使用できる手法が多数あります。 ただし、TTF (True Type Format) フォント ファイルの存在は、必ずしもフォント ファミリを意味するとは限りません。また、多くの場合、TTF はアプリケーションで使用することを意図していません。 さらに、プラットフォームにインストールされているフォントは、プラットフォームのバージョンによって変更される可能性があります。 したがって、フォント ファミリを指定する最も信頼性の高い方法は、カスタム フォントを使用することです。

カスタム フォントは Xamarin.Forms 共有プロジェクトに追加でき、追加作業なしでプラットフォーム プロジェクトで使用できます。 その手順は次のとおりです。

  1. Xamarin.Forms 共有プロジェクトに埋め込みリソースとしてフォントを追加します (ビルド アクション: EmbeddedResource)。
  2. AssemblyInfo.cs などのファイルで ExportFont 属性を使用して、フォント ファイルをアセンブリに登録します。 必要に応じて別名を指定することもできます。

次の例は、Lobster-Regular フォントが別名とともにアセンブリに登録されていることを示しています。

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

Note

フォントは、アセンブリにフォントを登録するときにフォルダー名を指定しなくても、共有プロジェクト内の任意のフォルダーに配置できます。

Windows では、フォント ファイル名とフォント名が異なる場合があります。 Windows でフォント名を検出するには、.ttf ファイルを右クリックし、[プレビュー] を選択します。 その後、プレビュー ウィンドウからフォント名を決定できます。

その後、フォントは、ファイル拡張子なしで名前を参照することで、各プラットフォームで使用できます。

<!-- Use font name -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster-Regular" />

または、別名を参照して、各プラットフォームで使用することもできます。

<!-- Use font alias -->
<Label Text="Hello Xamarin.Forms"
       FontFamily="Lobster" />

同等の C# コードを次に示します。

// Use font name
Label label1 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster"
};

次のスクリーンショットは、カスタム フォントを示しています。

iOS と Android のカスタム フォント

重要

Windows 上のリリース ビルドの場合は、カスタム フォントを含むアセンブリが Forms.Init メソッド呼び出しの引数として渡されていることを確認します。 詳細については、「 トラブルシューティング」を参照してください。

プラットフォームごとにフォント プロパティを設定する

XAML では、プラットフォームごとにフォント プロパティを設定するために、OnPlatform クラスと On クラスを使用できます。 次の例では、プラットフォームごとに異なるフォント ファミリとサイズを設定します。

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

Device.RuntimePlatform プロパティは、プラットフォームごとにフォント プロパティを設定するためにコードで使用できます

Label label = new Label
{
    Text = "Different font properties on different platforms"
};

label.FontSize = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

プラットフォーム固有の値の指定の詳細については、「プラットフォーム固有の値を指定する」を参照してください。 OnPlatform マークアップ拡張機能の詳細については、「OnPlatform マークアップ拡張機能」を参照してください。

名前付きフォント サイズについて

Xamarin.Forms は、特定のフォント サイズを表す NamedSize 列挙体のフィールドを定義します。 次の表は、NamedSize のメンバーと、iOS、Android、ユニバーサル Windows プラットフォーム (UWP) での既定のサイズを示しています。

メンバー iOS Android UWP
Default 17 14 14
Micro 12 10 15.667
Small 14 14 18.667
Medium 17 17 22.667
Large 22 22 32
Body 17 16 14
Header 17 14 46
Title 28 24 24
Subtitle 22 16 20
Caption 12 12 12

サイズの値は、デバイスに依存しない単位で測定されます。 詳細については、「測定単位」を参照してください。

Note

iOS および Android では、名前付きフォント サイズはオペレーティング システムのアクセシビリティ オプションに基づいて自動スケーリングされます。 この動作は、iOS でプラットフォーム固有を使用して無効にすることができます。 詳細については、「iOS での名前付きフォント サイズのアクセシビリティのスケーリング」を参照してください。

フォント アイコンの表示

FontImageSource オブジェクト内でフォント アイコン データを指定することで、Xamarin.Forms アプリケーションによりフォント アイコンを表示できます。 ImageSource クラスから派生するこのクラスには、次のプロパティがあります。

  • Glyph: string として指定される、フォント アイコン の Unicode 文字値。
  • Size: レンダリングされたフォント アイコンのサイズをデバイスに依存しない単位で示す double 値。 既定値は 30 です。 さらに、このプロパティは名前付きフォント サイズに設定できます。
  • FontFamily: フォント アイコンが属するフォント ファミリを表す string
  • Color: フォント アイコンを表示するときに使用する省略可能な Color 値。

フォント データは、ImageSource を表示できる任意のビューで表示できます。 この方法では、フォント アイコンの表示を Label などの単一のテキスト表示ビューに制限するのではなく、絵文字などのフォント アイコンを複数のビューで表示できます。

重要

フォント アイコンは、現在、Unicode 文字表現でのみ指定できます。

次の XAML の例では、1 つのフォント アイコンが Image ビューによって表示されています。

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

このコードは、Ionicons フォント ファミリの XBox アイコンを Image ビューに表示します。 このアイコンの Unicode 文字は \uf30c で、XAML でエスケープする必要があるため、&#xf30c; になることに注意してください。 同等の C# コードを次に示します。

Image image = new Image { BackgroundColor = Color.FromHex("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = Device.RuntimePlatform == Device.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

次のスクリーンショットは、バインド可能なレイアウトで表示されているいくつかのフォント アイコンを示しています。

iOS と Android で表示されているフォント アイコンのスクリーンショット