Fuentes en Xamarin.Forms

Descargar el ejemplo

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, Boldy 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 con estilo.

Establecimiento de atributos de fuente

Los controles que muestran texto pueden establecer la FontAttributes propiedad 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
};    

Establecer el tamaño de fuente

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

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

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

Nota

El FontSize valor, cuando se especifica como , doublese mide en unidades independientes del dispositivo. Para obtener más información, vea Unidades de medida.

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

Establecer la familia de fuentes

Los controles que muestran texto pueden establecer la FontFamily propiedad en un nombre de familia de fuentes, como "Times Roman". Sin embargo, esto solo funcionará si esa familia de fuentes es compatible con la plataforma en particular.

Hay varias 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 (formato de tipo true) no implica necesariamente una familia de fuentes, y los TTF a menudo se incluyen que no están pensados 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 Xamarin.Forms proyecto compartido y consumirse por proyectos de plataforma sin ningún trabajo adicional. El proceso para llevarlo a cabo es el siguiente:

1. Agregue la fuente al Xamarin.Forms proyecto compartido como un recurso incrustado (Acción de compilación: EmbeddedResource).
2. Registre el archivo de fuente con el ensamblado, en un archivo como AssemblyInfo.cs, mediante el ExportFont atributo . 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 fuente en Windows, haga clic con el botón derecho en el archivo .ttf y seleccione Vista previa. A continuación, el nombre de fuente se puede determinar desde la ventana de vista previa.

A continuación, la fuente se puede consumir 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 consumir 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:

personalizada en el

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 Forms.Init método. Para más información, consulte Solución de problemas.

Establecimiento de propiedades de fuente por plataforma

Las OnPlatform clases y On se pueden usar en XAML para establecer las 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 Device.RuntimePlatform propiedad se puede usar en el código para establecer las 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 obtener más información sobre cómo proporcionar valores específicos de la plataforma, consulte Proporcionar valores específicos de la plataforma. Para obtener información sobre la OnPlatform extensión de marcado, vea Extensión de marcado OnPlatform.

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

Xamarin.Forms define los campos de la NamedSize enumeración que representan tamaños de fuente específicos. En la tabla siguiente se muestran los NamedSize miembros 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 obtener más información, vea 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 una plataforma específica. Para obtener más información, consulte Escalado de accesibilidad para tamaños de fuente con nombre en iOS.

Presentación iconos de fuente

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

• Glyph: el valor de carácter unicode del icono de fuente, especificado como .string
• Size : 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 : que 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 ImageSource. Este enfoque permite que varias vistas muestren iconos de fuente, como emojis, en lugar de limitar la presentació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 mediante una Image vista:

<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 Image vista. Tenga 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, del ejemplo Diseños enlazables , se muestran varios iconos de fuente que se muestran mediante un diseño enlazable:

Vínculos relacionados

• FontsSample
• Texto (ejemplo)
• Diseños enlazables (ejemplo)
• Proporcionar valores específicos de la plataforma
• Extensión de marcado OnPlatform
• Diseños enlazables