Fuentes en .NET MAUI

  • Artículo

De forma predeterminada, las aplicaciones .NET Multi-platform App UI (.NET MAUI) usan la fuente Open Sans en cada plataforma. Pero este valor predeterminado se puede cambiar y se pueden registrar fuentes adicionales para su uso en una aplicación.

Todos los controles que muestran texto definen las propiedades que se pueden establecer para cambiar la apariencia de la fuente:

  • FontFamily, de tipo string.
  • 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.
  • FontAutoScalingEnabled, de tipo bool, que define si la interfaz de usuario de una aplicación refleja las preferencias de escalado de texto establecidas en el sistema operativo. El valor predeterminado de esta propiedad es true.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con estilo.

Todos los controles que muestran texto usan automáticamente el escalado de fuentes, lo que significa que la interfaz de usuario de una aplicación refleja las preferencias de escalado de texto establecidas en el sistema operativo.

Registrar fuentes

El formato de tipo true (TTF) y las fuentes de tipo abierto (OTF) se pueden agregar a la aplicación y hacer referencia a ella por nombre de archivo o alias, con el registro que se realiza en el método CreateMauiApp de la clase MauiProgram. Para ello, se invoca el método ConfigureFonts en la propiedad del objeto MauiAppBuilder: Después en el objeto IFontCollection, llama al método AddFont para agregar la fuente necesaria a la aplicación:

namespace MyMauiApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("Lobster-Regular.ttf", "Lobster");
                });

            return builder.Build();
        }
    }  
}

En el ejemplo anterior, el primer argumento para el método AddFont es el nombre del archivo de fuente, mientras que el segundo argumento representa un alias opcional por el que se puede hacer referencia a la fuente al consumirlo.

Se puede agregar una fuente al proyecto de aplicación arrastrándola a la carpeta Resources\Fonts del proyecto, donde su acción de compilación se establecerá automáticamente en MauiFont. Este comando crea un archivo en el archivo del proyecto. Como alternativa, todas las fuentes de la aplicación se pueden registrar mediante un carácter comodín en el archivo del proyecto:

<ItemGroup>
   <MauiFont Include="Resources\Fonts\*" />
</ItemGroup>

Las fuentes también se pueden agregar a otras carpetas del proyecto de aplicación. Pero en este escenario, su acción de compilación debe establecerse manualmente en MauiFont en la ventana Propiedades .

En tiempo de compilación, las fuentes se copian en el paquete de la aplicación. Para información sobre cómo deshabilitar el empaquetado de fuentes, consulta Deshabilitar el empaquetado de fuentes.

Nota:

El carácter comodín * indica que todos los archivos de la carpeta se tratarán como archivos de fuentes. Además, si quieres incluir también archivos de subcarpetas, configúralo con caracteres comodín adicionales, por ejemplo, Resources\Fonts\**\*.

Consumo de fuentes

Las fuentes registradas se pueden consumir estableciendo la propiedad FontFamily de un control que muestra texto en el nombre de fuente, sin la extensión de archivo:

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

Como alternativa, se puede consumir haciendo referencia a su alias:

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

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

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "Lobster"
};

En Android, las siguientes fuentes del sistema se pueden consumir estableciendo como el valor de la propiedad FontFamily:

  • monoespacio
  • serif
  • sans-serif (o sansserif)
  • sans-serif-black (o sansserif-black)
  • sans-serif-condensed (o sansserif-condensed)
  • sans-serif-condensed-light (o sansserif-condensed-light)
  • sans-serif-light (o sansserif-light)
  • sans-serif-medium (o sansserif-medium)

Por ejemplo, la fuente del sistema de monoespacio se puede consumir con el código XAML siguiente:

<Label Text="Hello .NET MAUI"
       FontFamily="monospace" />

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

// Use font name
Label label1 = new Label
{
    Text = "Hello .NET MAUI!",
    FontFamily = "monospace"
};

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 en cualquier valor double:

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

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

Label label = new Label
{
    Text = "Font size 24",
    FontSize = 24
};

Nota:

El valor FontSize se mide en unidades independientes del dispositivo.

Deshabilitación del escalado automático de fuentes

Todos los controles que muestran texto tienen habilitado el escalado de fuentes de forma predeterminada, lo que significa que la interfaz de usuario de una aplicación refleja las preferencias de escalado de texto establecidas en el sistema operativo. Sin embargo, este comportamiento se puede deshabilitar estableciendo la propiedad FontAutoScalingEnabled en el control basado en texto en false:

<Label Text="Scaling disabled"
       FontSize="18"
       FontAutoScalingEnabled="False" />

Este enfoque es útil cuando deseas garantizar que el texto se muestre en un tamaño específico.

Nota:

El escalado automático de fuentes también funciona con iconos de fuente. Para obtener más información, consulta Presentación de iconos de fuente.

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:

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=22, WinUI=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="WinUI" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

La propiedad DeviceInfo.Platform 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 = DeviceInfo.Platform == DevicePlatform.iOS ? 20 :
    DeviceInfo.Platform == DevicePlatform.Android ? 22 : 24;  
label.FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "MarkerFelt-Thin" :
    DeviceInfo.Platform == DevicePlatform.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Para obtener más información sobre cómo proporcionar valores específicos de la plataforma, consulta Información del dispositivo. Para obtener información sobre la extensión de marcado OnPlatform, consulta Personalización de la apariencia de la interfaz de usuario en función de la plataforma.

Presentación iconos de fuente

Las aplicaciones .NET MAUI pueden mostrar iconos de fuente especificando 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.

Estos datos se usan para crear un 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 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 &#xf30c;. El código de C# equivalente es el siguiente:

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

En la captura de pantalla siguiente se muestran varios iconos de fuente que se muestran:

Screenshot of three font icons.

Como alternativa, puedes mostrar un icono de fuente con la extensión de marcado FontImage. Para obtener más información, consulta Cargar un icono de fuente.