Fontes em Xamarin.Forms

Artigo
11/04/2020

Por padrão, Xamarin.Forms usa uma fonte do sistema definida por cada plataforma. No entanto, os controles que exibem texto definem propriedades que você pode usar para alterar essa fonte:

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.
FontFamily, de tipo string.

Essas propriedades são apoiadas por objetos BindableProperty, o que significa que podem ser alvos de associações de dados e ser estilizada.

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 diretamente ou por um NamedSize valor de enumeração:

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

Este é o código C# equivalente:

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

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

Como alternativa, o Device.GetNamedSize método tem uma substituição que especifica o segundo argumento como um Element:

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Observação

O FontSize valor, quando especificado como um double, é medido em unidades independentes do dispositivo. Para obter mais informações, consulte Unidades de medida.

Para obter mais informações sobre tamanhos de fonte nomeados, consulte Compreender tamanhos de fonte nomeados.

Definir a família de fontes

Os controles que exibem texto podem definir a propriedade como um nome de família de FontFamily fonte, como "Times Roman". No entanto, isso só funcionará se essa família de fontes for suportada na plataforma específica.

Há uma série de técnicas que podem ser usadas para tentar derivar as fontes que estão disponíveis em uma plataforma. No entanto, a presença de um arquivo de fonte TTF (True Type Format) não implica necessariamente uma família de fontes, e TTFs são frequentemente incluídos que não se destinam ao uso em aplicativos. Além disso, as fontes instaladas em uma plataforma podem mudar com a versão da plataforma. Portanto, a abordagem mais confiável para especificar uma família de fontes é usar uma fonte personalizada.

Fontes personalizadas podem ser adicionadas ao seu Xamarin.Forms projeto compartilhado e consumidas por projetos de plataforma sem qualquer trabalho adicional. O processo para realizar isso é o seguinte:

Adicione a fonte ao seu Xamarin.Forms projeto compartilhado como um recurso incorporado (Build Action: EmbeddedResource).
Registre o arquivo de fonte com o assembly, em um arquivo como AssemblyInfo.cs, usando o ExportFont atributo . Um alias opcional também pode ser especificado.

O exemplo a seguir mostra a fonte Lobster-Regular sendo registrada com o assembly, juntamente com um alias:

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

Observação

A fonte pode residir em qualquer pasta no projeto compartilhado, sem precisar especificar o nome da pasta ao registrar a fonte no assembly.

No Windows, o nome do arquivo de fonte e o nome da fonte podem ser diferentes. Para descobrir o nome da fonte no Windows, clique com o botão direito do mouse no arquivo de .ttf e selecione Visualizar. O nome da fonte pode ser determinado na janela de visualização.

A fonte pode então ser consumida em cada plataforma fazendo referência ao seu nome, sem a extensão do arquivo:

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

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

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

Este é o código C# equivalente:

// Use font name
Label label1 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster"
};

As capturas de tela a seguir mostram a fonte personalizada:

Importante

Para compilações de versão no Windows, verifique se o assembly que contém a fonte personalizada é passado como um argumento na chamada de Forms.Init método. Para saber mais, consulte a Solução de problemas.

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 em cada plataforma:

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

A Device.RuntimePlatform 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 = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Para obter mais informações sobre como fornecer valores específicos da plataforma, consulte Fornecer valores específicos da plataforma. Para obter informações sobre a extensão de OnPlatform marcação, consulte Extensão de marcação OnPlatform.

Entender os tamanhos de fonte nomeados

Xamarin.Forms Define campos na NamedSize enumeração que representam tamanhos de fonte específicos. A tabela a seguir mostra os NamedSize membros e seus tamanhos padrão no iOS, Android e na Plataforma Universal do Windows (UWP):

Membro	iOS	Android	UWP
`Default`	17	14	14
`Micro`	12	10	15.667
`Small`	14	14	18.667
`Medium`	17	17	22.667
`Large`	22	22	32
`Body`	17	16	14
`Header`	17	14	46
`Title`	28	24	24
`Subtitle`	22	16	20
`Caption`	12	12	12

Os valores de tamanho são medidos em unidades independentes do dispositivo. Para obter mais informações, consulte Unidades de medida.

Observação

No iOS e Android, os tamanhos de fonte nomeados serão dimensionados automaticamente com base nas opções de acessibilidade do sistema operacional. Esse comportamento pode ser desabilitado no iOS com uma plataforma específica. Para obter mais informações, consulte Dimensionamento de acessibilidade para tamanhos de fonte nomeados no iOS.

Exibir ícones de fonte

Os ícones de fonte podem ser exibidos por Xamarin.Forms aplicativos 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.

Os dados da fonte podem ser exibidos por qualquer modo de 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 . Este é o código C# equivalente:

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

As capturas de tela a seguir mostram vários ícones de fonte sendo exibidos por um layout vinculável:

Captura de tela de ícones de fonte sendo exibidos, no iOS e Android

Fontes em Xamarin.Forms

Definir atributos de fonte

Definir o tamanho da fonte

Definir a família de fontes

Definir propriedades de fonte por plataforma

Entender os tamanhos de fonte nomeados

Exibir ícones de fonte

Links relacionados

Recursos adicionais