Fontes no .NET MAUI

  • Artigo

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, de 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, de 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 BindableProperty objetos, o que significa que elas podem ser alvos de associações de dados e estilizadas.

Todos os controles que exibem texto automaticamente usam 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, chame IFontCollection 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 método é o nome do arquivo da fonte, enquanto o AddFont 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á definida automaticamente 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>

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 .

Em tempo 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.

Observação

O * caractere curinga indica que todos os arquivos dentro da pasta serão tratados como sendo arquivos de fonte. Além disso, se você quiser incluir arquivos de subpastas também, configure-o usando caracteres curinga adicionais, por exemplo, Resources\Fonts\**\*.

Consumir fontes

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

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

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

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

Este é 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, as seguintes fontes do sistema podem ser consumidas definindo-as como o valor da FontFamily propriedade:

  • espaçamento uniforme
  • com serifa
  • sans-serif (ou sansserif)
  • sans-serif-black (ou sansserif-preto)
  • 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" />

Este é 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" />

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

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

Este é o código C# equivalente:

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

Observação

O FontSize valor é medido em unidades independentes do dispositivo.

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 em controles baseados 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.

Observação

O dimensionamento automático de fontes também funciona com ícones de fonte. Para obter mais informações, consulte Exibir ícones de fonte.

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 e tamanhos de fontes:

<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, consulte Personalizar a aparência da OnPlatform 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. Essa classe, que deriva da ImageSource classe, tem as seguintes propriedades:

  • Glyph – o valor do caractere unicode do ícone de fonte, especificado como um stringarquivo .
  • 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.
  • FontFamily – um string representante da 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 ImageSourcearquivo . Essa abordagem permite que ícones de fonte, como emojis, sejam exibidos por várias exibições, em vez de limitar a exibição de ícones de fonte a uma única exibição de apresentação de texto, como um Labelarquivo .

Importante

No momento, os ícones de fonte só podem ser especificados por sua representação de caracteres unicode.

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 exibição. Observe que, embora o caractere unicode para esse ícone seja \uf30c, ele precisa ser escapado em XAML e, portanto, se torna &#xf30c;. Este é 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:

Screenshot of three font icons.

Como alternativa, você pode exibir um ícone de fonte com a extensão de FontImage marcação. Para obter mais informações, consulte Carregar um ícone de fonte.