.NET MAUI のフォント

既定では、.NET Multi-platform App UI (.NET MAUI) アプリでは、各プラットフォームで Open Sans フォントを使用します。 ただし、この既定値は変更でき、追加のフォントを登録してアプリで使用できます。

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

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

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

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

フォントを登録する

TrueType 形式 (TTF) のフォントと OpenType フォント (OTF) をアプリに追加し、ファイル名またはエイリアスで参照できます。登録は MauiProgram クラスの CreateMauiApp メソッドで行います。 これを行うには、MauiAppBuilder オブジェクトの ConfigureFonts メソッドを呼び出します。 次に、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-black (または sansserif-black)
• 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" />

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

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

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

<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 の外観をプラットフォームに応じてカスタマイズする」を参照してください。

フォント アイコンの表示

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

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

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

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

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

または、FontImage マークアップ拡張機能を含むフォント アイコンを表示することもできます。 詳細については、「Load a font icon」を参照してください。