Fuentes en Xamarin.Forms

Descargar ejemplo. Descarga del 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: , y None Bold 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.

Establecer 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 FontSize la propiedad para especificar el tamaño de fuente. La FontSize propiedad se puede establecer en un valor directamente o mediante un valor de double NamedSize 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 double , se 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, vea Comprender los tamaños de fuente con nombre.

Establecimiento de la familia de fuentes

Los controles que muestran texto pueden establecer la propiedad en un nombre de familia de FontFamily 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 que están disponibles en una plataforma. Sin embargo, la presencia de un archivo de fuente TTF (true type format) no implica necesariamente una familia de fuentes y, a menudo, se incluyen 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.

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

  1. Agregue la fuente al proyecto Xamarin.Forms 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 Lobster-Regular fuente que se está registrando 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"
};

En las capturas de pantalla siguientes se muestra la fuente personalizada:

! [Fuente personalizada en iOS y Android] (fonts-images/custom-sml.png "Custom Fonts Example".

Importante

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

Establecimiento de propiedades de fuente por plataforma

Las OnPlatform clases y se pueden usar en XAML para establecer propiedades de fuente por On plataforma. En el ejemplo siguiente se establecen diferentes familias de fuentes y tamaños 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 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, vea Proporcionar valores específicos de la plataforma. Para obtener información sobre la OnPlatform extensión de marcado, vea Extensión de marcado OnPlatform.

Información sobre 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 miembros y sus tamaños predeterminados en iOS, Android y la Plataforma NamedSize Windows universal (UWP):

Member 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 96 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, vea Accessibility Scaling for Named Font Sizes on iOS (Escalado de accesibilidad para tamaños de fuente con nombre en iOS).

Presentación iconos de fuente

Las aplicaciones pueden mostrar iconos de fuente Xamarin.Forms especificando los datos del icono de fuente en un FontImageSource objeto . Esta clase, que se 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 representa string la familia de fuentes a la que pertenece el icono de fuente.
  • Color : un valor Color opcional que se usará al mostrar el icono de fuente.

Estos datos se usan para crear un archivo PNG, que se puede 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 de iconos 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 de XAML siguiente se muestra un icono de fuente única 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 , tiene que \uf30c escaparse en XAML y, por tanto, se convierte en &#xf30c; . 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:

Captura de pantalla de los iconos de fuente que se muestran en iOS y Android.