Fontes em Xamarin.Forms

Baixar o exemplo

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

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

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

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

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 tiver suporte na 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 os TTFs geralmente são incluídos que não se destinam ao uso em aplicativos. Além disso, as fontes instaladas em uma plataforma podem ser alteradas 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:

1. Adicione a fonte ao projeto Xamarin.Forms compartilhado como um recurso inserido (Ação de Build: EmbeddedResource).
2. 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 com o 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. Em seguida, o nome da fonte pode ser determinado na janela de visualização.

Em seguida, a fonte pode ser consumida em cada plataforma referenciando seu nome, sem a extensão de 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:

de

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 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 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 OnPlatform extensão de 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 no 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 dimensionado 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 nomeada no iOS.

Exibir ícones de fonte

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

Os dados da fonte podem ser exibidos por qualquer exibição 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 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 caractere unicode.

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 esse ícone seja \uf30c, ele precisa 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, do exemplo Layouts Associáveis , mostram vários ícones de fonte sendo exibidos por um layout associável:

Links relacionados

• FontsSample
• Texto (exemplo)
• Layouts Associáveis (exemplo)
• Fornecer valores específicos da plataforma
• Extensão de marcação OnPlatform
• Layouts associáveis