Fontes no .NET MAUI

Por padrão, os aplicativos .NET Multi-platform App UI (.NET MAUI) usam a fonte Open Sans em cada plataforma. No entanto, esse padrão pode ser alterado e fontes adicionais podem ser registradas para uso em um aplicativo.

Todos os controles que exibem texto definem propriedades que podem ser definidas para alterar a aparência da fonte:

• FontFamily, do tipo string.
• FontAttributes, do tipo FontAttributes, que é uma enumeração com três membros: None, Bold, e Italic. O valor padrão dessa propriedade é None.
• FontSize, do tipo double.
• FontAutoScalingEnabled, do tipo bool, que define se a interface do usuário de um aplicativo reflete as preferências de dimensionamento de texto definidas no sistema operacional. O valor padrão dessa propriedade é true.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que elas podem ser alvos de associações de dados e também podem ser estilizadas.

Todos os controles que exibem texto usam automaticamente o dimensionamento de fonte, o que significa que a interface do usuário de um aplicativo reflete as preferências de dimensionamento de texto definidas no sistema operacional.

Registrar fontes

As fontes True Type format (TTF) e open type font (OTF) podem ser adicionadas ao seu aplicativo e referenciadas por nome de arquivo ou alias, com o CreateMauiApp registro sendo realizado no método na MauiProgram classe. Isso é feito invocando o ConfigureFonts método no MauiAppBuilder objeto. Em seguida, no objeto IFontCollection, chame o método AddFont para adicionar a fonte requerida ao seu aplicativo.

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();
        }
    }  
}

No exemplo acima, o primeiro argumento para o AddFont método é o nome do arquivo da fonte, enquanto o segundo argumento representa um alias opcional pelo qual a fonte pode ser referenciada ao consumi-la.

Uma fonte pode ser adicionada ao seu projeto de aplicativo arrastando-a para a pasta Resources\Fonts do projeto, onde sua ação de compilação será automaticamente definida como MauiFont. Isso cria uma entrada correspondente em seu arquivo de projeto. Como alternativa, todas as fontes no aplicativo podem ser registradas usando um curinga em seu arquivo de projeto:

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

As fontes também podem ser adicionadas a outras pastas do seu projeto de aplicativo. No entanto, nesse cenário, sua ação de compilação deve ser definida manualmente como MauiFont na janela Propriedades .

No momento da compilação, as fontes são copiadas para o pacote do aplicativo. Para obter informações sobre como desabilitar o empacotamento de fontes, consulte Desabilitar o empacotamento de fontes.

Consumir fontes

As fontes registradas podem ser consumidas definindo a FontFamily propriedade de um controle que exibe texto para o nome da fonte, sem a extensão de arquivo:

<!-- Use font name -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster-Regular" />

Alternativamente, ele pode ser consumido fazendo referência ao seu alias:

<!-- Use font alias -->
<Label Text="Hello .NET MAUI"
       FontFamily="Lobster" />

O código C# equivalente é:

// 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"
};

Em Android, as seguintes fontes do sistema podem ser consumidas atribuindo-lhes como valor a propriedade FontFamily.

• largura fixa
• Serif
• sans-serif (ou sansserif)
• sans-serif-black (ou sansserif-black)
• sans-serif-condensado (ou sans-serif-condensado)
• sans-serif-condensed-light (ou sansserif-condensed-light)
• sans-serif-light (ou sansserif-light)
• sans-serif-medium (ou sansserif-medium)

Por exemplo, a fonte do sistema monospace pode ser consumida com o seguinte XAML:

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

O código C# equivalente é:

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

Definir atributos de fonte

Os controles que exibem texto podem definir a FontAttributes propriedade para especificar atributos de fonte:

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

O código C# equivalente é:

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};    

Definir o tamanho do tipo de letra

Os controles que exibem texto podem definir a FontSize propriedade para especificar o tamanho da fonte. A FontSize propriedade pode ser definida como um double valor:

<Label Text="Font size 24"
       FontSize="24" />

O código C# equivalente é:

Label label = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

Desativar o dimensionamento automático de fontes

Todos os controles que exibem texto têm o dimensionamento de fonte habilitado por padrão, o que significa que a interface do usuário de um aplicativo reflete as preferências de dimensionamento de texto definidas no sistema operacional. No entanto, esse comportamento pode ser desabilitado definindo a FontAutoScalingEnabled propriedade no controle baseado em texto para false:

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

Essa abordagem é útil quando você deseja garantir que o texto seja exibido em um tamanho específico.

Definir propriedades de fonte por plataforma

As OnPlatform classes e On podem ser usadas em XAML para definir propriedades de fonte por plataforma. O exemplo abaixo define diferentes famílias de fontes e tamanhos:

<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>

A DeviceInfo.Platform propriedade pode ser usada no código para definir propriedades de fonte por plataforma:

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";

Para obter mais informações sobre como fornecer valores específicos da plataforma, consulte Informações do dispositivo. Para obter informações sobre a extensão de marcação OnPlatform, consulte Personalizar a aparência da interface do usuário com base na plataforma.

Exibir ícones de fonte

Os ícones de fonte podem ser exibidos por aplicativos .NET MAUI especificando os dados do ícone de fonte em um FontImageSource objeto. Esta classe, que deriva da ImageSource classe, tem as seguintes propriedades:

• Glyph – O valor do caractere Unicode do ícone de fonte, especificado como um string valor.
• Size – um double valor que indica o tamanho, em unidades independentes do dispositivo, do ícone de fonte renderizada. O valor predefinido é 30. Além disso, essa propriedade pode ser definida como um tamanho de fonte nomeado. Para obter mais informações sobre unidades independentes de dispositivo, consulte Unidades independentes de dispositivo.
• FontFamily – um string que representa a família de fontes à qual o ícone de fonte pertence.
• Color – um valor opcional Color a ser usado ao exibir o ícone de fonte.

Esses dados são usados para criar um PNG, que pode ser exibido por qualquer vista que possa exibir um ImageSource. Essa abordagem permite que ícones de fonte, como emojis, sejam exibidos por vários modos de exibição, em vez de limitar a exibição de ícones de fonte a um único modo de exibição de apresentação de texto, como um Label.

O exemplo XAML a seguir tem um único ícone de fonte sendo exibido por um Image modo de exibição:

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

Esse código exibe um ícone Xbox, da família de fontes Ionicons, em uma Image vista. Observe que, embora o caractere unicode para esse ícone seja \uf30c, ele precisa ser escapado em XAML e assim se torna . O código C# equivalente é:

Image image = new Image { BackgroundColor = Color.FromArgb("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

A captura de tela a seguir mostra vários ícones de fonte sendo exibidos: