.NET MAUI のフォント

[アーティクル]
02/13/2024

既定では、.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 に設定する必要があります。

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

Note

* のワイルドカード文字は、フォルダー内のすべてのファイルがフォントファイルとして扱われることを示します。さらに、サブフォルダーのファイルも含める場合は、追加のワイルドカード文字 (Resources\Fonts\**\* など) を使用して設定します。

フォントを使用する

登録したフォントを使用するには、テキストを表示するコントロールの 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
};

Note

FontSize の値は、デバイスに依存しない単位で測定されます。

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

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

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

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

Note

フォントの自動スケーリングは、フォントアイコンでも機能します。詳細については、「フォントアイコンを表示する」を参照してください。

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

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 などのフォントアイコンを複数のビューで表示できます。

重要

フォントアイコンは、現在、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.FromArgb("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

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

Screenshot of three font icons.

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

.NET MAUI のフォント

フォントを登録する

フォントを使用する

フォント属性を設定する

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

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

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

フォントアイコンの表示

フィードバック

その他のリソース

.NET MAUI のフォント

フォントを登録する

フォントを使用する

フォント属性を設定する

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

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

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

フォント アイコンの表示

フィードバック

その他のリソース

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

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

フォントアイコンの表示