Шрифты в .NET MAUI

Статья
02/13/2024

По умолчанию приложения .NET Multi-platform App UI (.NET MAUI) используют шрифт Open Sans на каждой платформе. Однако это значение по умолчанию можно изменить, а дополнительные шрифты можно зарегистрировать для использования в приложении.

Все элементы управления, отображающие текстовые свойства, которые можно задать для изменения внешнего вида шрифта:

FontFamily типа string.
FontAttributes, тип FontAttributes, который является перечислением с тремя элементами: None, Boldи Italic. Значение по умолчанию этого свойства равно None.
FontSize типа double.
FontAutoScalingEnabledтип bool, определяющий, отражает ли пользовательский интерфейс приложения параметры масштабирования текста, заданные в операционной системе. Значение по умолчанию этого свойства равно true.

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.

Все элементы управления, отображающие текст, автоматически используют масштабирование шрифтов, что означает, что пользовательский интерфейс приложения отражает параметры масштабирования текста, заданные в операционной системе.

Регистрация шрифтов

В приложение можно добавить шрифты true type (TTF) и шрифты открытого типа (OTF), на которые ссылается имя файла или псевдоним, при этом регистрация выполняется в CreateMauiApp методе MauiProgram в классе. Это достигается путем вызова ConfigureFonts метода в объекте MauiAppBuilder . Затем вызовите IFontCollectionAddFont метод, чтобы добавить необходимый шрифт в приложение:

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. При этом создается соответствующая запись в файле проекта. Кроме того, все шрифты в приложении можно зарегистрировать с помощью wild карта в файле проекта:

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

Шрифты также можно добавить в другие папки проекта приложения. Однако в этом сценарии действие сборки должно быть вручную задано в MauiFont в окне свойств.

Во время сборки шрифты копируются в пакет приложения. Сведения об отключении упаковки шрифтов см. в разделе "Отключить упаковку шрифтов".

Примечание.

Символ * wild карта указывает, что все файлы в папке будут рассматриваться как файлы шрифтов. Кроме того, если вы хотите включить файлы из вложенных папок, настройте его с помощью дополнительных диких карта символов, например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-сжатый свет (или sansserif-сжатый свет)
sans-serif-light (или sansserif-light)
sans-serif-medium (или sansserif-medium)

Например, шрифт системы monospace можно использовать со следующим кодом 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 измеряется в единицах, независимых от устройства.

Отключение автоматического масштабирования шрифта

Все элементы управления, отображающие текст, поддерживают масштабирование шрифтов по умолчанию, что означает, что пользовательский интерфейс приложения отражает параметры масштабирования текста, заданные в операционной системе. Однако это поведение можно отключить, задав FontAutoScalingEnabled для элемента управления falseна основе текста значение :

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

Этот подход полезен, если вы хотите гарантировать, что текст отображается по определенному размеру.

Примечание.

Автоматическое масштабирование шрифта также работает со значками шрифта. Дополнительные сведения см. в разделе "Отображение значков шрифта".

Задание свойств шрифта для каждой платформы

On Классы OnPlatform и классы можно использовать в 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 разделе "Настройка внешнего вида пользовательского интерфейса на основе платформы".

Отображение значков шрифтов

Значки шрифтов можно отображать приложениями .NET MAUI, указывая данные значка шрифта в объекте FontImageSource . Этот класс, производный ImageSource от класса, имеет следующие свойства:

Glyph — значение символа юникода значка шрифта, указанное в виде символа string.
Sizedouble— значение, указывающее размер( в независимых от устройства единицах) отрисованного значка шрифта. Значение по умолчанию — 30. Кроме того, это свойство можно задать для именованного размера шрифта.
FontFamily — представляет string семейство шрифтов, к которому принадлежит значок шрифта.
Color — необязательное Color значение, используемое при отображении значка шрифта.

Эти данные используются для создания PNG, который может отображаться любым представлением, которое может отображаться ImageSource. Этот подход позволяет отображать значки шрифта, такие как эмодзи, в нескольких представлениях, а не ограничение отображения значков шрифта на одно текстовое представление, например Label.

Важно!

Значки шрифтов можно указать только в настоящее время в представлении символов юникода.

В следующем примере XAML есть один значок шрифта, отображаемый представлением Image :

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

Этот код отображает значок XBox из семейства шрифтов Ionicons в представлении Image . Обратите внимание, что в то время как символ юникода для этого значка \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 . Дополнительные сведения см. в разделе "Загрузка значка шрифта".

Шрифты в .NET MAUI

Регистрация шрифтов

Использование шрифтов

Настройка атрибутов шрифта

Настройка размера шрифта

Отключение автоматического масштабирования шрифта

Задание свойств шрифта для каждой платформы

Отображение значков шрифтов

Обратная связь

Дополнительные ресурсы