Fuentes en .NET MAUI

De forma predeterminada, las aplicaciones de interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) usan la fuente Open Sans en cada plataforma. Sin embargo, 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, Boldy 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 que se les puede aplicar un 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 TrueType (TTF) y las fuentes OpenType (OTF) se pueden agregar a tu aplicación y referenciar por nombre de archivo o alias, mientras que el registro se realiza en el método CreateMauiApp de la clase MauiProgram. Esto se logra invocando el ConfigureFonts método en el MauiAppBuilder objeto . A continuación, en el IFontCollection objeto , llame al AddFont método 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 AddFont método es el nombre de 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. Esto crea una entrada correspondiente 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. Sin embargo, 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 obtener información sobre cómo deshabilitar el empaquetado de fuentes, consulte 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 fuente. Además, si quiere incluir archivos de subcarpetas también, configúrelo con caracteres comodín adicionales, por ejemplo, Resources\Fonts\**\*.

Consumo de fuentes

Las fuentes registradas se pueden consumir estableciendo la FontFamily propiedad 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 estableciéndolas como valor de la propiedad FontFamily:

• monoespacio
• serifa
• 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 sans-serif-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"
};

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:

<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 FontSize valor se mide en unidades independientes del dispositivo. Para obtener más información, consulte 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 controles basados en texto a false:

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

Este enfoque es útil cuando desea 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, consulte Mostrar iconos de fuente.

Establecimiento de propiedades de fuente por plataforma

Las OnPlatform clases 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 DeviceInfo.Platform 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 = 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, consulte Información del dispositivo. Para obtener información sobre la extensión de marcado, consulte Personalización de la apariencia de la OnPlatforminterfaz de usuario en función de la plataforma.

Mostrar iconos de fuente

Las aplicaciones MAUI de .NET pueden mostrar 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 : un double valor 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. Para obtener más información sobre las unidades independientes del dispositivo, consulte Unidades independientes del dispositivo.
• FontFamily – string que representa la familia de la que el icono de fuente pertenece.
• 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, un único icono de fuente es mostrado por 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.FromArgb("#D1D1D1") };
image.Source = new FontImageSource
{
    Glyph = "\uf30c",
    FontFamily = DeviceInfo.Platform == DevicePlatform.iOS ? "Ionicons" : "ionicons.ttf#",
    Size = 44
};

En la siguiente captura de pantalla se muestran varios iconos de fuentes:

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