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. También es posible usar una fuente personalizaday 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;

Xamarin. Forms también define los campos NamedSize de la enumeración que representan tamaños de fuente específicos.Xamarin.Forms also defines fields in the NamedSize enumeration that represent specific font sizes. Para obtener más información sobre los tamaños de fuente con nombre, vea tamaños de fuente con nombre.For more information about named font sizes, see Named font sizes.

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;

Establecer la 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.

Establecer 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, la FontAttributes propiedad se puede utilizar para especificar los 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. En el ejemplo siguiente se usa un aspecto de fuente personalizado en iOS (MarkerFelt-fino) y solo se especifican el tamaño y los 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.

Tamaños de fuente con nombreNamed font sizes

Xamarin. Forms define los campos NamedSize de la enumeración que representan tamaños de fuente específicos.Xamarin.Forms defines fields in the NamedSize enumeration that represent specific font sizes. En la tabla siguiente se NamedSize muestran los miembros y sus tamaños predeterminados en iOS, Android y el plataforma universal de Windows (UWP):The following table shows the NamedSize members, and their default sizes on iOS, Android, and the Universal Windows Platform (UWP):

MemberMember iOSiOS AndroidAndroid UWPUWP
Default 1616 1414 1414
Micro 1111 1010 15.66715.667
Small 1313 1414 18.66718.667
Medium 1616 1717 22.66722.667
Large 2020 2222 3232
Body 1717 1616 1414
Header 1717 9696 4646
Title 2828 2424 2424
Subtitle 2222 1616 2020
Caption 1212 1212 1212

Los tamaños de fuente con nombre se pueden establecer a través de XAML y código.Named font sizes can be set through both XAML and code. Además, se puede Device.GetNamedSize llamar al método para devolver un double que representa el tamaño de fuente con nombre:In addition, the Device.GetNamedSize method can be called to return a double that represents the named font size:

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

Nota

En iOS y Android, los tamaños de fuente con nombre se escalan automáticamente en función de las opciones de accesibilidad del sistema operativo.On iOS and Android, named font sizes will autoscale based on operating system accessibility options. Este comportamiento se puede deshabilitar en iOS con una plataforma específica.This behavior can be disabled on iOS with a platform-specific. Para obtener más información, vea escalado de accesibilidad para tamaños de fuente con nombre en iOS.For more information, see Accessibility Scaling for Named Font Sizes on iOS.

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. Agregue el archivo de fuente con la acción de compilación: BundleResourceyAdd 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. En primer lugar, agregue el archivo de fuente a la carpeta assets 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

Las aplicaciones de Xamarin. Forms pueden mostrar iconos de fuente especificando los datos del icono de FontImageSource fuente de un 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 clase, tiene las propiedades siguientes:This class, which derives from the ImageSource class, has the following properties:

  • Glyph: el valor del carácter Unicode del icono de fuente, especificado como 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 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``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: un valor Color opcional 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 PNG, que puede mostrarse en cualquier vista que muestre 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 varias vistas muestren iconos de fuente, como emojis, en lugar de limitar la presentación del icono de fuente a una única vista de presentación de texto, Labelcomo.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

Los iconos de fuente solo se pueden especificar actualmente mediante su representación de caracteres Unicode.Font icons can only currently be specified by their unicode character representation.

En el siguiente ejemplo de XAML se muestra un icono de fuente único Image en una 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 Xbox, de la familia de fuentes Ionicons, en Image una vista.This code displays an XBox icon, from the Ionicons font family, in an Image view. Tenga en cuenta que, mientras que el carácter Unicode \uf30cpara este icono es, tiene que incluir un carácter de &#xf30c;escape en XAML, por lo que se convierte en.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
};

En las siguientes capturas de pantalla, desde el ejemplo de diseños enlazables , 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 fuente que se muestran, en iOS y AndroidScreenshot of font icons being displayed, on iOS and Android