Fontes no .NET MAUI

Por padrão, os aplicativos da interface do usuário de aplicativo multiplataforma do .NET (.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, Bolde 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 eles podem ser alvos de associações de dados e estilizados.

Todos os controles que exibem texto usam automaticamente o dimensionamento de fontes, 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 formato TrueType (TTF) e fonte OpenType (OTF) podem ser adicionadas ao seu aplicativo e referenciadas por nome de arquivo ou alias, com o registro sendo realizado no método CreateMauiApp na classe MauiProgram. Isso é feito invocando o ConfigureFonts método no MauiAppBuilder objeto. Em seguida, no IFontCollection objeto, chame o AddFont método para adicionar a fonte necessária 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 de 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 projeto do aplicativo arrastando-a para a pasta Resources\Fonts do projeto, em que sua ação de build será automaticamente definida como MauiFont. Isso cria uma entrada correspondente no arquivo de projeto. Como alternativa, todas as fontes no aplicativo podem ser registradas usando um curinga no arquivo de projeto:

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

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

Durante o processo de 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 ao definir a propriedade FontFamily de um controle que exibe texto para incluir o nome da fonte, sem a extensão de arquivo.

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

Como alternativa, ele pode ser consumido referenciando 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"
};

No Android, é possível utilizar as seguintes fontes do sistema ao defini-las como valor da propriedade FontFamily.

• espaçamento uniforme
• Serif
• sans-serif (ou sansserif)
• sans-serif-black (ou sansserif-black)
• sans-serif-condensado (ou sansserif-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

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

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

Desabilitar o dimensionamento automático da fonte

Todos os controles que exibem texto têm o dimensionamento de fontes 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 como 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 e On podem ser usadas em XAML para definir propriedades de fonte por plataforma. O exemplo a seguir 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 as informações do dispositivo. Para obter informações sobre a OnPlatform extensão de marcação, consulte Personalizar a aparência da interface do usuário com base na plataforma.

Exibir ícones de fonte

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

• Glyph – o valor de caractere unicode do ícone de fonte, especificado como um string.
• Size – um double valor que indica o tamanho, em unidades independentes do dispositivo, do ícone de fonte renderizada. O valor padrão é 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 exibição que possa exibir um ImageSource. Essa abordagem permite que ícones de fonte, como emojis, sejam exibidos em várias visualizações, em vez de limitar a exibição de ícones de fonte a uma única visualização de apresentação de texto, como em um Label.

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

<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 um modo de exibição Image . Observe que, embora o caractere unicode para este ícone seja \uf30c, ele precisa ser codificado 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: