Xamarin.Forms のフォント

[アーティクル]
11/04/2020

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

FontAttributes 型の FontAttributes は、None、Bold、Italic の 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 共有プロジェクトに追加でき、追加作業なしでプラットフォームプロジェクトで使用できます。その手順は次のとおりです。

Xamarin.Forms 共有プロジェクトに埋め込みリソースとしてフォントを追加します (ビルドアクション: EmbeddedResource)。
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"
};

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

重要

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 でエスケープする必要があるため、 になることに注意してください。同等の 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 で表示されているフォントアイコンのスクリーンショット

次の方法で共有

Xamarin.Forms のフォント

フォント属性を設定する

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

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

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

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

フォントアイコンの表示

その他のリソース

次の方法で共有

Xamarin.Forms のフォント

フォント属性を設定する

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

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

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

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

フォント アイコンの表示

関連リンク

その他のリソース

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

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

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

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

フォントアイコンの表示