.NET MAUI 中的字体

默认情况下,.NET 多平台应用 UI (.NET MAUI) 应用在每个平台上使用 Open Sans 字体。 但是,可以更改此默认值,并且可以注册其他字体以便在应用中使用。

显示文本的所有控件定义可设置为更改字体外观的属性:

  • FontFamily 的类型是 string
  • FontAttributes,类型 FontAttributes,它是具有三个成员的枚举: NoneBoldItalic。 此属性的默认值为 None
  • FontSize,类型 double
  • FontAutoScalingEnabled,类型 bool,用于定义应用的 UI 是否反映操作系统中设置的文本缩放设置。 此属性的默认值为 true

这些属性由 BindableProperty 对象提供支持,表示它们可以是数据绑定的目标,并可以设置样式。

显示文本的所有控件都自动使用字体缩放,这意味着应用的 UI 反映了作系统中设置的文本缩放首选项。

注册字体

TrueType字体格式(TTF)和OpenType字体格式(OTF)可以添加到您的应用程序中,并通过文件名或别名进行引用,并在CreateMauiApp方法所在的MauiProgram类中执行注册。 这是通过在 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 是字体文件名,而第二个参数表示可选别名,在使用字体时可以引用该字体。

通过将字体拖到项目的 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属性的值,可以调用这些系统字体:

  • 等宽字体
  • 衬线
  • sans-serif (或 sansserif)
  • sans-serif-black (或 sansserif-black)
  • 无衬线压缩(或无衬线压缩)
  • sans-serif-condensed-light(或 sans-serif-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" />

如果要保证文本以特定大小显示,此方法非常有用。

注释

字体自动缩放也适用于字体图标。 有关详细信息,请参阅 显示字体图标

为每个平台设置字体属性

XAML 中可以使用这些 OnPlatformOn 类来设置每个平台的字体属性。 以下示例设置不同的字体系列和大小:

<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 – 字体图标的 unicode 字符值,指定为 string.
  • Size – 一个 double 值,该值指示呈现的字体图标的大小(以与设备无关的单位为单位)。 默认值为 30。 此外,此属性可以设置为指定的预设字体大小。 有关与设备无关的单元的详细信息,请参阅 与设备无关的单元
  • FontFamily – 一个 string 用于表示该字体图标所属的字体系列。
  • Color – 显示字体图标时要使用的可选 Color 值。

此数据用于创建 PNG,任何能够显示 ImageSource 的视图都可以显示该 PNG。 此方法允许多个视图显示字体图标(如表情符号),而不是将字体图标显示限制为单个文本呈现视图,例如 Label

重要

字体图标当前只能由其 unicode 字符表示形式指定。

以下 XAML 示例通过 Image 视图显示单个字体图标:

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

此代码在视图中显示 Ionicons 字体系列中的 Image 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
};

以下屏幕截图显示了显示的多个字体图标:

三个字体图标的屏幕截图。

或者,可以使用 FontImage 标记扩展来显示字体图标。 有关详细信息,请参阅 “加载字体”图标