Fontes em Xamarin.Forms

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

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:

1. Adicione a fonte ao seu Xamarin.Forms projeto 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 no assembly, juntamente com um alias:

using Xamarin.Forms;

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

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:

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):

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

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.

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:

Links relacionados

• Forneça valores específicos da plataforma
• Extensão de marcação OnPlatform
• Layouts Associáveis