共用方式為

.NET MAUI 中的字型

  • 發行項

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

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

  • FontFamily型 string別為 的 。
  • FontAttributes型 FontAttributes別為 的 ，這是具有三個成員的列舉： None、 Bold和 Italic。 此屬性的預設值為 None。
  • FontSize型 double別為 的 。
  • FontAutoScalingEnabled型 bool別為的 ，定義應用程式的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會反映作業系統中設定的文字縮放喜好設定。 不過，藉由將文字型控件上的 屬性設定 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 – 字型圖示的 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 。 如需詳細資訊，請參閱 載入字型圖示。