Fuentes en Xamarin.Forms

Artículo
04/23/2024

De forma predeterminada, Xamarin.Forms usa una fuente del sistema definida por cada plataforma. Sin embargo, los controles que muestran texto definen las propiedades que puede usar para cambiar esta fuente:

FontAttributes de tipo FontAttributes, que es una enumeración con tres miembros, None, Bold y Italic. El valor predeterminado de esta propiedad es None.
FontSize, de tipo double.
FontFamily, de tipo string.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

Establece atributos de fuente

Los controles que muestran texto pueden establecer la propiedad FontAttributes para especificar atributos de fuente:

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

El código de C# equivalente es el siguiente:

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};

Establece el tamaño de fuente.

Los controles que muestran texto pueden establecer la propiedad FontSize para especificar el tamaño de fuente. La propiedad FontSize se puede establecer directamente en un valor double o mediante un valor de enumeración NamedSize:

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

El código de C# equivalente es el siguiente:

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, el método Device.GetNamedSize tiene una invalidación que especifica el segundo argumento como un objeto Element:

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

Nota:

El valor FontSize, cuando se especifica como un objeto double, se mide en unidades independientes del dispositivo. Para más información, consulte Unidades de medida.

Para más información sobre los tamaños de fuente con nombre, consulte Descripción de los tamaños de fuente con nombre.

Establecimiento de la familia de fuentes

Los controles que muestran texto pueden establecer la propiedad FontFamily en el nombre de una familia de fuentes, como "Times Roman". Sin embargo, esto solo funcionará si esa familia de fuentes se admite en la plataforma determinada.

Hay una serie de técnicas que se pueden usar para intentar derivar las fuentes disponibles en una plataforma. Sin embargo, la presencia de un archivo de fuente TTF (True Type Format) no significa necesariamente que pertenezca a una familia de fuentes, y a menudo se incluyen archivos TTF que no están diseñados para su uso en aplicaciones. Además, las fuentes instaladas en una plataforma pueden cambiar con la versión de la plataforma. Por lo tanto, el enfoque más confiable para especificar una familia de fuentes es usar una fuente personalizada.

Las fuentes personalizadas se pueden agregar al proyecto compartido de Xamarin.Forms y utilizarse en los proyectos de plataforma sin ningún trabajo adicional. El proceso para llevarlo a cabo es el siguiente:

Agregue la fuente al proyecto compartido de Xamarin.Forms como un recurso incrustado (Acción de compilación: EmbeddedResource).
Registre el archivo de fuente con el ensamblado, en un archivo como AssemblyInfo.cs, mediante el atributo ExportFont. También se puede especificar un alias opcional.

En el ejemplo siguiente se muestra la fuente Lobster-Regular que se registra con el ensamblado, junto con un alias:

using Xamarin.Forms;

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

Nota:

La fuente puede residir en cualquier carpeta del proyecto compartido, sin tener que especificar el nombre de la carpeta al registrar la fuente con el ensamblado.

En Windows, el nombre del archivo de fuente y el nombre de fuente pueden ser diferentes. Para detectar el nombre de la fuente en Windows, haga clic con el botón derecho en el archivo .ttf y seleccione Vista previa. El nombre de la fuente se puede determinar entonces desde la ventana de vista previa.

A continuación, la fuente se puede usar en cada plataforma haciendo referencia a su nombre, sin la extensión de archivo:

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

Como alternativa, se puede usar en cada plataforma haciendo referencia a su alias:

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

El código de C# equivalente es el siguiente:

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

Las capturas de pantalla siguientes muestran la fuente personalizada:

Importante

Para las compilaciones de versión en Windows, asegúrese de que el ensamblado que contiene la fuente personalizada se pasa como argumento en la llamada al método Forms.Init. Para más información, consulte Solución de problemas.

Establecimiento de propiedades de fuente por plataforma

Las clases OnPlatform y On se pueden usar en XAML para establecer propiedades de fuente por plataforma. En el ejemplo siguiente se establecen diferentes tamaños y familias de fuentes en 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>

La propiedad Device.RuntimePlatform se puede usar en el código para establecer propiedades de fuente 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 más información sobre cómo proporcionar valores específicos de la plataforma, consulte Proporcionar valores específicos de la plataforma. Para información sobre de la extensión de marcado OnPlatform, consulte Extensión de marcado OnPlatform.

Descripción de los tamaños de fuente con nombre

Xamarin.Forms define los campos de la enumeración NamedSize que representan tamaños de fuente específicos. En la tabla siguiente se muestran los miembros NamedSize y sus tamaños predeterminados en iOS, Android y la Plataforma universal de Windows (UWP):

Miembro	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

Los valores de tamaño se miden en unidades independientes del dispositivo. Para más información, consulte Unidades de medida.

Nota:

En iOS y Android, los tamaños de fuente con nombre se escalarán automáticamente en función de las opciones de accesibilidad del sistema operativo. Este comportamiento se puede deshabilitar en iOS con un valor específico de la plataforma. Para más información, consulte Escalado de accesibilidad para tamaños de fuente con nombre en iOS.

Presentación iconos de fuente

Se pueden mostrar iconos de fuente en las aplicaciones de Xamarin.Forms mediante la especificación de los datos del icono de fuente en un objeto FontImageSource. Esta clase, que deriva de la clase ImageSource, tiene las siguientes propiedades:

Glyph: el valor de carácter unicode del icono de fuente, especificado como string.
Size: un valor double que indica el tamaño, en unidades independientes del dispositivo, del icono de fuente representado. El valor predeterminado es 30. Además, esta propiedad se puede establecer en un tamaño de fuente con nombre.
FontFamily: string representa la familia de fuentes a la que pertenece el icono de fuente.
Color: un valor opcional Color que se usará al mostrar el icono de fuente.

Los datos de fuente se pueden mostrar en cualquier vista que pueda mostrar un objeto ImageSource. Este enfoque permite que varias vistas muestren iconos de fuente, como emojis, en lugar de limitar la visualización del icono de fuente a una sola vista de presentación de texto, como Label.

Importante

Los iconos de fuente solo se pueden especificar actualmente mediante su representación de caracteres unicode.

En el ejemplo XAML siguiente se muestra un único icono de fuente que muestra una vista Image:

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

Este código muestra un icono XBox, de la familia de fuentes Ionicons, en una vista Image. Ten en cuenta que, aunque el carácter unicode de este icono es \uf30c, debe escaparse en XAML y, por tanto, se convierte en . El código de C# equivalente es el siguiente:

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

En las capturas de pantalla siguientes, de la muestra Diseños enlazables, aparecen varios iconos de fuente que se muestran mediante un diseño enlazable:

Screenshot of font icons being displayed, on iOS and Android

Fuentes en Xamarin.Forms

Establece atributos de fuente

Establece el tamaño de fuente.

Establecimiento de la familia de fuentes

Establecimiento de propiedades de fuente por plataforma

Descripción de los tamaños de fuente con nombre

Presentación iconos de fuente

Vínculos relacionados

Recursos adicionales