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, Bold, e 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 propriedade para especificar atributos de FontAttributes 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 , 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 Entender tamanhos de fonte nomeados.

Definir a família de fontes

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

Há várias técnicas que podem ser usadas para tentar derivar as fontes 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 geralmente são incluídos TTFs que não se destinam ao uso em aplicativos. Além disso, as fontes instaladas em uma plataforma podem mudar de acordo 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 nenhum trabalho adicional. O processo para realizar isso é o seguinte:

Adicione a fonte ao seu Xamarin.Forms projeto compartilhado como um recurso inserido (Ação de Build: 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 no 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 .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 referenciando seu nome, sem a extensão do arquivo:

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

Como alternativa, ele pode ser consumido em cada plataforma referenciando 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 builds 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 and On podem ser usadas em XAML para definir propriedades de fonte por plataforma. O exemplo abaixo define diferentes famílias e tamanhos de fonte 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 no 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 da 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 – a string representando a família de fontes à qual o ícone de fonte pertence.
Color – um valor opcional Color a ser usado ao exibir o ícone da fonte.

Os dados da fonte podem ser exibidos por qualquer exibição que possa exibir um ImageSourcedomínio . 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 do ícone de fonte a um único modo de exibição de apresentação de texto, como um Label.

Importante

Atualmente, 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 este ícone seja \uf30c, ele deve ser escapado em XAML e, portanto, torna-se . 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 associável:

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

Partilhar via

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

Recursos adicionais

Partilhar via

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