.NET MAUI のフォント

既定では、.NET マルチプラットフォーム アプリ UI (.NET MAUI) アプリでは、各プラットフォームで Open Sans フォントが使用されます。 ただし、この既定値は変更でき、アプリで使用するために追加のフォントを登録できます。

テキストを表示するすべてのコントロールは、フォントの外観を変更するために設定できるプロパティを定義します。

• FontFamily、 string型の。
• FontAttributes: FontAttributes型。これは、 None、 Bold、 Italicの 3 つのメンバーを持つ列挙体です。 このプロパティの既定値は Noneです。
• FontSize、doubleの型です。
• FontAutoScalingEnabled: bool型。アプリの UI にオペレーティング システムで設定されたテキスト スケーリングの基本設定が反映されるかどうかを定義します。 このプロパティの既定値は trueです。

これらのプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットとしてスタイルを設定できます。

テキストを表示するすべてのコントロールでは、フォントのスケーリングが自動的に使用されます。つまり、アプリの UI には、オペレーティング システムで設定されたテキストのスケーリング設定が反映されます。

フォントを登録する

True 型形式 (TTF) フォントとオープン型フォント (OTF) フォントをアプリに追加し、ファイル名またはエイリアスで参照できます。登録は、CreateMauiApp クラスの MauiProgram メソッドで実行されます。 これは、ConfigureFonts オブジェクトで MauiAppBuilder メソッドを呼び出すことによって実現されます。 次に、 IFontCollection オブジェクトで、 AddFont メソッドを呼び出して、必要なフォントをアプリに追加します。

namespace MyMauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("Lobster-Regular.ttf", "Lobster");
                });

            return builder.Build();
        }
    }  
}

上の例では、 AddFont メソッドの最初の引数はフォント ファイル名です。2 番目の引数は、フォントを使用するときに参照できる省略可能なエイリアスを表します。

フォントをアプリ プロジェクトに追加するには、プロジェクトの Resources\Fonts フォルダーにフォントをドラッグすると、そのビルド アクションが自動的に MauiFont に設定されます。 これにより、プロジェクト ファイルに対応するエントリが作成されます。 または、プロジェクト ファイルでワイルドカードを使用して、アプリ内のすべてのフォントを登録できます。

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

フォントは、アプリ プロジェクトの他のフォルダーにも追加できます。 ただし、このシナリオでは、[プロパティ] ウィンドウでビルド アクションを手動で MauiFont に設定する必要があります。

ビルド時に、フォントがアプリ パッケージにコピーされます。 フォント パッケージを無効にする方法については、「フォント パッケージを 無効にする」を参照してください。

フォントを使用する

登録されているフォントは、テキストをフォント名に表示するコントロールの FontFamily プロパティをファイル拡張子なしで設定することで使用できます。

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

または、エイリアスを参照して使用することもできます。

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

同等の C# コードは次のとおりです。

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

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

Android では、 FontFamily プロパティの値として設定することで、次のシステム フォントを使用できます。

• 等幅
• セリフ
• sans-serif (または sansserif)
• サンセリフブラック（またはサンサーリフブラック）
• sans-serif-condensed (または sansserif-condensed)
• sans-serif-condensed-light (または sansserif-condensed-light)
• sans-serif-light (または sansserif-light)
• sans-serif-medium (または sansserif-medium)

たとえば、モノスペース システム フォントは、次の XAML で使用できます。

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

同等の C# コードは次のとおりです。

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

フォント属性を設定する

テキストを表示するコントロールは、フォント属性を指定する 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値に設定できます。

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

同等の C# コードは次のとおりです。

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

フォントの自動スケーリングを無効にする

テキストを表示するすべてのコントロールでは、フォントのスケーリングが既定で有効になっています。つまり、アプリの UI には、オペレーティング システムで設定されたテキストのスケーリング設定が反映されます。 ただし、テキスト ベースのコントロールの FontAutoScalingEnabled プロパティを false に設定すると、この動作を無効にできます。

<Label Text="Scaling disabled"
       FontSize="18"
       FontAutoScalingEnabled="False" />

この方法は、テキストが特定のサイズで表示されることを保証する場合に便利です。

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

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

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

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

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

label.FontSize = DeviceInfo.Platform == DevicePlatform.iOS ? 20 :
    DeviceInfo.Platform == DevicePlatform.Android ? 22 : 24;  
label.FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "MarkerFelt-Thin" :
    DeviceInfo.Platform == DevicePlatform.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

プラットフォーム固有の値の指定の詳細については、「 デバイス情報」を参照してください。 OnPlatformマークアップ拡張機能の詳細については、「プラットフォームに基づいて UI の外観をカスタマイズする」を参照してください。

フォント アイコンを表示する

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

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

このデータは PNG を作成するために使用されます。PNG は、 ImageSourceを表示できる任意のビューで表示できます。 この方法では、フォント アイコンの表示を 1 つのテキスト表示ビュー ( Labelなど) に制限するのではなく、絵文字などのフォント アイコンを複数のビューで表示できます。

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

<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.FromArgb("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

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