共用方式為


.NET MAUI 中的字型

根據預設,.NET 多平臺應用程式 UI (.NET MAUI) 應用程式會在每個平臺上使用 Open Sans 字型。 不過,此預設值可以變更,而且可以註冊其他字型以在應用程式中使用。

顯示文字的所有控制項都會定義可設定為變更字型外觀的屬性:

  • FontFamilystring別為 的 。
  • FontAttributesFontAttributes別為 的 ,這是具有三個成員的列舉: NoneBoldItalic。 此屬性的預設值為 None
  • FontSizedouble別為 的 。
  • FontAutoScalingEnabledbool別為的 ,定義應用程式的UI是否反映作業系統中設定的文字調整喜好設定。 此屬性的預設值為 true

這些屬性是由 BindableProperty 物件所支援,這表示這些屬性可以是數據系結的目標,並設定樣式。

顯示文字的所有控件都會自動使用字型調整,這表示應用程式的UI會反映作業系統中設定的文字縮放喜好設定。

註冊字型

True 類型格式 (TTF) 和開啟類型字型 (OTF) 字型可以新增至您的應用程式,並以檔名或別名參考,並在 類別的 方法中CreateMauiAppMauiProgram執行註冊。 這是藉由 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 是字型檔名,而第二個自變數代表選擇性別名,可在取用字型時參考該字型。

您可以將字型拖曳至專案的 Resources\Fonts 資料夾,將其建置動作自動設定為 MauiFont,以將字型新增至您的應用程式專案。 這會在項目檔中建立對應的專案。 或者,應用程式中的所有字型都可以在項目檔中使用通配符來註冊:

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

字型也可以新增至應用程式專案的其他資料夾。 不過,在此案例中,其建置動作必須在 [屬性] 視窗中手動設定為MauiFont

在建置階段,字型會複製到您的應用程式套件。 如需停用字型封裝的詳細資訊,請參閱 停用字型封裝

注意

*通配符表示資料夾內的所有檔案都會被視為字型檔案。 此外,如果您想要也包含子資料夾中的檔案,請使用其他通配符進行設定,例如 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 ,即可取用下列系統字型:

  • 等寬
  • serif
  • 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
};

注意

此值 FontSize 是以裝置無關的單位來測量。

停用字型自動調整

顯示文字的所有控件預設都會啟用字型調整,這表示應用程式的UI會反映作業系統中設定的文字縮放喜好設定。 不過,藉由將文字型控件上的 屬性設定 FontAutoScalingEnabledfalse,即可停用此行為:

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

當您想要保證文字以特定大小顯示時,此方法很有用。

注意

字型自動調整也適用於字型圖示。 如需詳細資訊,請參閱 顯示字型圖示

設定每個平臺的字型屬性

OnPlatformOn 類別可用於 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 – 字型圖示的 unicode 字元值,指定為 string
  • Size – 值 double ,指出所轉譯字型圖示的大小,以裝置獨立單位為單位。 預設值是 30。 此外,這個屬性也可以設定為具名字號。
  • FontFamilystring– ,表示字型圖示所屬的字型系列。
  • Color – 顯示字型圖示時要使用的選擇性 Color 值。

此數據可用來建立 PNG,此 PNG 可由任何可顯示 的 ImageSource檢視顯示。 這種方法允許多個檢視顯示字型圖示,例如 emoji,而不是將字型圖示顯示限制為單一文字呈現檢視,例如 Label

重要

字型圖示目前只能由其 Unicode 字元表示來指定。

下列 XAML 範例具有檢視所顯示的 Image 單一字型圖示:

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

此程式代碼會在檢視中 Image 顯示來自 Ionicons 字型系列的 XBox 圖示。 請注意,雖然此圖示的 Unicode 字元是 \uf30c,但它必須在 XAML 中逸出,因此會 &#xf30c;變成 。 對等的 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 。 如需詳細資訊,請參閱 載入字型圖示