Fuentes de Xamarin.FormsFonts in Xamarin.Forms

Descargar ejemplo descargar el ejemploDownload Sample Download the sample

Este artículo describe cómo Xamarin.Forms le permite especificar atributos de fuente (incluidas peso y tamaño) en los controles que muestran texto.This article describes how Xamarin.Forms lets you specify font attributes (including weight and size) on controls that display text. Puede ser información de fuente especificado en el código o especificado en XAML.Font information can be specified in code or specified in XAML. Tiene ' también es posible utilizar un fuente personalizada, y mostrar iconos de fuente.It's' also possible to use a custom font, and display font icons.

Establecer la fuente en el códigoSet the font in code

Use las tres propiedades relacionadas con la fuente de todos los controles que muestran texto:Use the three font-related properties of any controls that display text:

  • FontFamily – el string nombre de la fuente.FontFamily – the string font name.
  • FontSize – el tamaño de fuente como un double.FontSize – the font size as a double.
  • Atributos de fuente – una cadena que especifica la información de estilo como cursiva y negrita (mediante el FontAttributes enumeración en C#).FontAttributes – a string specifying style information like Italic and Bold (using the FontAttributes enumeration in C#).

Este código muestra cómo crear una etiqueta y especifique el tamaño de fuente y el peso para mostrar:This code shows how to create a label and specify the font size and weight to display:

var about = new Label {
    FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
    FontAttributes = FontAttributes.Bold,
    Text = "Medium Bold Font"
};

Tamaño de fuenteFont size

El FontSize propiedad puede establecerse en un valor double, por ejemplo:The FontSize property can be set to a double value, for instance:

label.FontSize = 24;

También puede usar el NamedSize enumeración que tiene cuatro opciones integradas; Xamarin.Forms elige el mejor tamaño para cada plataforma.You can also use the NamedSize enumeration which has four built-in options; Xamarin.Forms chooses the best size for each platform.

  • MicroMicro
  • PequeñoSmall
  • MedioMedium
  • GrandesLarge

El NamedSize enumeración puede ser dondequiera que usa un FontSize puede especificarse mediante la Device.GetNamedSize método para convertir el valor de un double:The NamedSize enumeration can be used wherever a FontSize can be specified using the Device.GetNamedSize method to convert the value to a double:

label.FontSize = Device.GetNamedSize(NamedSize.Small, typeof(Label));

Atributos de fuenteFont attributes

Estilos de fuente como negrita y cursiva se pueden establecer en el FontAttributes propiedad.Font styles such as bold and italic can be set on the FontAttributes property. Actualmente se admiten los siguientes valores:The following values are currently supported:

  • NingunoNone
  • NegritaBold
  • CursivaItalic

El FontAttribute enumeración se puede usar como sigue (se puede especificar un atributo único o OR juntarlas):The FontAttribute enumeration can be used as follows (you can specify a single attribute or OR them together):

label.FontAttributes = FontAttributes.Bold | FontAttributes.Italic;

Conjunto de información de fuente por plataformaSet font info per platform

Como alternativa, el Device.RuntimePlatform propiedad puede usarse para establecer los nombres de fuente diferente en cada plataforma, como se muestra en este código:Alternatively, the Device.RuntimePlatform property can be used to set different font names on each platform, as demonstrated in this code:

label.FontFamily = Device.RuntimePlatform == Device.iOS ? "Lobster-Regular" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular.ttf#Lobster-Regular" : "Assets/Fonts/Lobster-Regular.ttf#Lobster",
label.FontSize = Device.RuntimePlatform == Device.iOS ? 24 :
   Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : Device.GetNamedSize(NamedSize.Large, label);

Es una buena fuente de información de fuentes para iOS iosfonts.com.A good source of font information for iOS is iosfonts.com.

Establezca la fuente en XAMLSet the font in XAML

Xamarin.Forms controla ese texto para mostrar todos tienen un FontSize propiedad que se puede establecer en XAML.Xamarin.Forms controls that display text all have a FontSize property that can be set in XAML. La manera más sencilla para establecer la fuente en XAML es usar los valores de enumeración de tamaño con nombre, como se muestra en este ejemplo:The simplest way to set the font in XAML is to use the named size enumeration values, as shown in this example:

<Label Text="Login" FontSize="Large"/>
<Label Text="Instructions" FontSize="Small"/>

Hay un convertidor de tipos integrado para el FontSize propiedad que permite que todos los valores de fuente se exprese como un valor de cadena en XAML.There is a built-in converter for the FontSize property that allows all font settings to be expressed as a string value in XAML. Además, el FontAttributes propiedad puede utilizarse para especificar atributos de fuente:In addition, the FontAttributes property can be used to specify font attributes:

<Label Text="Italics are supported" FontAttributes="Italic" />
<Label Text="Biggest NamedSize" FontSize="Large" />
<Label Text="Use size 72" FontSize="72" />

Device.RuntimePlatform También se puede utilizar en XAML para representar una fuente diferente en cada plataforma.Device.RuntimePlatform can also be used in XAML to render a different font on each platform. El ejemplo siguiente utiliza un nombre de fuente personalizados en iOS (MarkerFelt Thin) y especifica solo tamaño y atributos en las otras plataformas:The example below uses a custom font face on iOS (MarkerFelt-Thin) and specifies only size/attributes on the other platforms:

<Label Text="Hello Forms with XAML">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
                <On Platform="iOS" Value="MarkerFelt-Thin" />
                <On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular" />
                <On Platform="UWP" Value="Assets/Fonts/Lobster-Regular.ttf#Lobster" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

Al especificar un nombre de fuente personalizada, siempre es una buena idea usar OnPlatform, ya que es difícil encontrar una fuente que está disponible en todas las plataformas.When specifying a custom font face, it is always a good idea to use OnPlatform, as it is difficult to find a font that is available on all platforms.

Usar una fuente personalizadaUse a custom font

El uso de una fuente que no sea de los tipos de letra integrados requiere algún código específico de la plataforma.Using a font other than the built-in typefaces requires some platform-specific coding. Esta captura de pantalla muestra la fuente personalizada Lobster desde fuentes de código abierto de Google representar mediante Xamarin.Forms.This screenshot shows the custom font Lobster from Google's open-source fonts rendered using Xamarin.Forms.

Fuente personalizada en iOS y AndroidCustom font on iOS and Android

A continuación, se describen los pasos necesarios para cada plataforma.The steps required for each platform are outlined below. Cuando se incluyen archivos de fuente personalizada con una aplicación, asegúrese de comprobar que permite la licencia de la fuente de distribución.When including custom font files with an application, be sure to verify that the font's license allows for distribution.

iOSiOS

Es posible mostrar una fuente personalizada en primer lugar, lo que garantiza que se carga y, luego, que hace referencia a él por su nombre mediante Xamarin.Forms Font métodos.It is possible to display a custom font by first ensuring that it is loaded, then referring to it by name using the Xamarin.Forms Font methods. Siga las instrucciones de esta entrada de blog:Follow the instructions in this blog post:

  1. Agregar el archivo de fuentes con acción de compilación: BundleResource, yAdd the font file with Build Action: BundleResource, and
  2. Actualización de la Info.plist archivo (fuentes proporcionadas por la aplicación, o UIAppFonts, key), a continuación,Update the Info.plist file (Fonts provided by application, or UIAppFonts, key), then
  3. Hacer referencia al mismo nombre siempre que defina una fuente de Xamarin.Forms.Refer to it by name wherever you define a font in Xamarin.Forms!
new Label
{
    Text = "Hello, Forms!",
    FontFamily = Device.RuntimePlatform == Device.iOS ? "Lobster-Regular" : null // set only for iOS
}

AndroidAndroid

Xamarin.Forms para Android puede hacer referencia a una fuente personalizada que se ha agregado al proyecto siguiendo un estándar de nomenclatura.Xamarin.Forms for Android can reference a custom font that has been added to the project by following a specific naming standard. Primero agregue el archivo de fuente a la activos carpeta en el proyecto de aplicación y establezca acción de compilación: AndroidAsset.First add the font file to the Assets folder in the application project and set Build Action: AndroidAsset. A continuación, utilice la ruta de acceso completa y nombre de la fuente separados por una almohadilla (#) como el nombre de fuente en Xamarin.Forms, como se muestra en el siguiente fragmento de código:Then use the full path and Font Name separated by a hash (#) as the font name in Xamarin.Forms, as the code snippet below demonstrates:

new Label
{
  Text = "Hello, Forms!",
  FontFamily = Device.RuntimePlatform == Device.Android ? "Lobster-Regular.ttf#Lobster-Regular" : null // set only for Android
}

WindowsWindows

Xamarin.Forms para plataformas de Windows puede hacer referencia a una fuente personalizada que se ha agregado al proyecto siguiendo un estándar de nomenclatura.Xamarin.Forms for Windows platforms can reference a custom font that has been added to the project by following a specific naming standard. Primero agregue el archivo de fuente a la /Assets/fuentes/ carpeta en el proyecto de aplicación y establezca el compilar: contenido de la acción.First add the font file to the /Assets/Fonts/ folder in the application project and set the Build Action:Content. A continuación, utilice la fuente y la ruta de acceso de nombre de archivo completo, seguido por una almohadilla (#) y el nombre de la fuente, tal y como se muestra el siguiente fragmento de código:Then use the full path and font filename, followed by a hash (#) and the Font Name, as the code snippet below demonstrates:

new Label
{
    Text = "Hello, Forms!",
    FontFamily = Device.RuntimePlatform == Device.UWP ? "Assets/Fonts/Lobster-Regular.ttf#Lobster" : null // set only for UWP apps
}

Nota

Tenga en cuenta que el nombre de archivo de fuente y el nombre de fuente pueden ser diferentes.Note that the font file name and font name may be different. Para conocer el nombre de fuente en Windows, haga clic en el archivo .ttf y seleccione Preview.To discover the font name on Windows, right-click the .ttf file and select Preview. A continuación, se puede determinar el nombre de fuente desde la ventana Vista previa.The font name can then be determined from the preview window.

El código común de la aplicación ya está completo.The common code for the application is now complete. El código del marcador de teléfono específico de la plataforma se implementará como DependencyService.Platform-specific phone dialer code will now be implemented as a DependencyService.

XAMLXAML

También puede usar Device.RuntimePlatform en XAML para representar una fuente personalizada:You can also use Device.RuntimePlatform in XAML to render a custom font:

<Label Text="Hello Forms with XAML">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
                <On Platform="iOS" Value="Lobster-Regular" />
                <On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular" />
                <On Platform="UWP" Value="Assets/Fonts/Lobster-Regular.ttf#Lobster" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

Mostrar iconos de fuenteDisplay font icons

Iconos de la fuente pueden mostrar las aplicaciones de Xamarin.Forms mediante la especificación de los datos del icono de fuente en un FontImageSource objeto.Font icons can be displayed by Xamarin.Forms applications by specifying the font icon data in a FontImageSource object. Esta clase, que se deriva de la ImageSource class, tiene las siguientes propiedades:This class, which derives from the ImageSource class, has the following properties:

  • Glyph : el valor de carácter unicode del icono de fuente, especificado como un string.Glyph – the unicode character value of the font icon, specified as a string.
  • Size : un double valor que indica el tamaño, en unidades independientes del dispositivo, del icono de la fuente representada.Size – a double value that indicates the size, in device-independent units, of the rendered font icon. El valor predeterminado es 30.The default value is 30.
  • FontFamily : un string que representa la familia de fuentes a la que pertenece el icono de fuente.FontFamily – a string representing the font family to which the font icon belongs.
  • Color – opcional Color valor que se usará al mostrar el icono de fuente.Color – an optional Color value to be used when displaying the font icon.

Estos datos se usan para crear un archivo PNG, que puede mostrarse en cualquier vista que puede mostrar un ImageSource.This data is used to create a PNG, which can be displayed by any view that can display an ImageSource. Este enfoque permite que los iconos de la fuente, como los emojis, que va a mostrar varias vistas, en lugar de limitar la presentación de iconos de fuente para un solo texto, ya que presenta la vista, como un Label .This approach permits font icons, such as emojis, to be displayed by multiple views, as opposed to limiting font icon display to a single text presenting view, such as a Label.

Importante

Actualmente solo se pueden especificar iconos de la fuente por su representación de caracteres unicode.Font icons can only currently be specified by their unicode character representation.

En el siguiente ejemplo XAML tiene un icono de única fuente mostrado por un Image vista:The following XAML example has a single font icon being displayed by an Image view:

<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 de XBox, desde la familia de fuentes Ionicons, en un Image vista.This code displays an XBox icon, from the Ionicons font family, in an Image view. Tenga en cuenta que mientras el unicode de caracteres de este icono es \uf30c, tiene que ser caracteres de escape en XAML y por lo que se convierte en &#xf30c;.Note that while the unicode character for this icon is \uf30c, it has to be escaped in XAML and so becomes &#xf30c;. El código de C# equivalente es:The equivalent C# code is:

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

Las siguientes capturas de pantalla, desde el diseños enlazable de ejemplo, se muestran varios iconos de fuente mostrados por un diseño enlazable:The following screenshots, from the Bindable Layouts sample, show several font icons being displayed by a bindable layout:

Captura de pantalla de los iconos de la fuente que se muestra, en iOS y AndroidScreenshot of font icons being displayed, on iOS and Android