Condividi tramite

Tipi di carattere in .NET MAUI

  • Articolo

Per impostazione predefinita, le app .NET multipiattaforma (.NET MAUI) usano il tipo di carattere Open Sans in ogni piattaforma. Tuttavia, questo valore predefinito può essere modificato e i tipi di carattere aggiuntivi possono essere registrati per l'uso in un'app.

Tutti i controlli che visualizzano testo definiscono le proprietà che possono essere impostate per modificare l'aspetto del carattere:

  • FontFamily, di tipo string.
  • FontAttributes, di tipo FontAttributes, che è un'enumerazione con tre membri: None, Bolde Italic. Il valore predefinito di questa proprietà è None.
  • FontSize, di tipo double.
  • FontAutoScalingEnabled, di tipo bool, che definisce se l'interfaccia utente di un'app riflette le preferenze di ridimensionamento del testo impostate nel sistema operativo. Il valore predefinito di questa proprietà è true.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Tutti i controlli che visualizzano il testo usano automaticamente il ridimensionamento dei caratteri, il che significa che l'interfaccia utente di un'app riflette le preferenze di ridimensionamento del testo impostate nel sistema operativo.

Registrare i tipi di carattere

I tipi di carattere OTF (True type format) e open type font (OTF) possono essere aggiunti all'app e a cui fa riferimento il nome file o l'alias, con la registrazione eseguita nel CreateMauiApp metodo nella MauiProgram classe . A tale scopo, richiamare il ConfigureFonts metodo sull'oggetto MauiAppBuilder . Quindi, nell'oggetto IFontCollection chiamare il AddFont metodo per aggiungere il tipo di carattere richiesto all'app:

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();
        }
    }  
}

Nell'esempio precedente, il primo argomento del AddFont metodo è il nome del file di carattere, mentre il secondo argomento rappresenta un alias facoltativo a cui è possibile fare riferimento al tipo di carattere durante l'utilizzo.

Un tipo di carattere può essere aggiunto al progetto dell'app trascinandolo nella cartella Resources\Fonts del progetto, in cui l'azione di compilazione verrà impostata automaticamente su MauiFont. Verrà creata una voce corrispondente nel file di progetto. In alternativa, tutti i tipi di carattere nell'app possono essere registrati usando un carattere jolly nel file di progetto:

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

I tipi di carattere possono anche essere aggiunti ad altre cartelle del progetto dell'app. In questo scenario, tuttavia, l'azione di compilazione deve essere impostata manualmente su MauiFont nella finestra Proprietà .

In fase di compilazione, i tipi di carattere vengono copiati nel pacchetto dell'app. Per informazioni sulla disabilitazione della creazione di pacchetti di tipi di carattere, vedere Disabilitare la creazione di pacchetti di tipi di carattere.

Nota

Il * carattere jolly indica che tutti i file all'interno della cartella verranno considerati come file di tipo di carattere. Inoltre, se si desidera includere anche file da sottocartelle, configurarlo usando caratteri jolly aggiuntivi, Resources\Fonts\**\*ad esempio .

Utilizzare i tipi di carattere

I tipi di carattere registrati possono essere utilizzati impostando la FontFamily proprietà di un controllo che visualizza il testo sul nome del tipo di carattere, senza l'estensione di file:

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

In alternativa, può essere utilizzato facendo riferimento al relativo alias:

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

Il codice C# equivalente è il seguente:

// 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"
};

In Android è possibile utilizzare i tipi di carattere di sistema seguenti impostandoli come valore della FontFamily proprietà :

  • spaziatura fissa
  • serif
  • sans-serif (o sansserif)
  • sans-serif-black (o sansserif-black)
  • sans-serif-condensato (o sansserif-condensato)
  • sans-serif-condensato-luce (o sansserif-condensato-luce)
  • sans-serif-light (o sansserif-light)
  • sans-serif-medium (o sansserif-medium)

Ad esempio, il tipo di carattere del sistema monospace può essere utilizzato con il codice XAML seguente:

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

Il codice C# equivalente è il seguente:

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

Impostare gli attributi del tipo di carattere

I controlli che visualizzano testo possono impostare la FontAttributes proprietà per specificare gli attributi del tipo di carattere:

<Label Text="Italics"
       FontAttributes="Italic" />
<Label Text="Bold and italics"
       FontAttributes="Bold, Italic" />

Il codice C# equivalente è il seguente:

Label label1 = new Label
{
    Text = "Italics",
    FontAttributes = FontAttributes.Italic
};

Label label2 = new Label
{
    Text = "Bold and italics",
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic
};

Impostare le dimensioni del carattere

I controlli che visualizzano testo possono impostare la FontSize proprietà per specificare le dimensioni del carattere. La FontSize proprietà può essere impostata su un double valore:

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

Il codice C# equivalente è il seguente:

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

Nota

Il FontSize valore viene misurato in unità indipendenti dal dispositivo.

Disabilitare il ridimensionamento automatico dei tipi di carattere

Tutti i controlli che visualizzano il testo sono abilitati per impostazione predefinita, il che significa che l'interfaccia utente di un'app riflette le preferenze di ridimensionamento del testo impostate nel sistema operativo. Tuttavia, questo comportamento può essere disabilitato impostando la FontAutoScalingEnabled proprietà sul controllo basato su testo su false:

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

Questo approccio è utile quando si vuole garantire che il testo venga visualizzato con dimensioni specifiche.

Nota

Il ridimensionamento automatico dei tipi di carattere funziona anche con le icone dei tipi di carattere. Per altre informazioni, vedere Visualizzare le icone dei tipi di carattere.

Impostare le proprietà del tipo di carattere per ogni piattaforma

Le OnPlatform classi e On possono essere usate in XAML per impostare le proprietà del tipo di carattere per ogni piattaforma. L'esempio seguente imposta diverse famiglie di caratteri e dimensioni:

<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 proprietà può essere usata nel codice per impostare le proprietà del tipo di carattere per ogni piattaforma:

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";

Per altre informazioni sulla fornitura di valori specifici della piattaforma, vedere Informazioni sul dispositivo. Per informazioni sull'estensione di markup, vedere Personalizzare l'aspetto OnPlatform dell'interfaccia utente in base alla piattaforma.

Visualizzare le icone dei tipi di carattere

Le icone dei tipi di carattere possono essere visualizzate dalle app .NET MAUI specificando i dati dell'icona del carattere in un FontImageSource oggetto . Questa classe, che deriva dalla ImageSource classe , ha le proprietà seguenti:

  • Glyph: valore carattere Unicode dell'icona del carattere, specificato come .string
  • Size : valore double che indica le dimensioni, in unità indipendenti dal dispositivo, dell'icona del tipo di carattere di cui è stato eseguito il rendering. Il valore predefinito è 30. Inoltre, questa proprietà può essere impostata su una dimensione del carattere denominata.
  • FontFamily : oggetto string che rappresenta la famiglia di caratteri a cui appartiene l'icona del carattere.
  • Color : valore facoltativo Color da utilizzare durante la visualizzazione dell'icona del carattere.

Questi dati vengono usati per creare un file PNG, che può essere visualizzato da qualsiasi visualizzazione in grado di visualizzare un oggetto ImageSource. Questo approccio consente la visualizzazione di icone dei tipi di carattere, ad esempio emoji, da più visualizzazioni, anziché limitare la visualizzazione dell'icona del carattere a una singola visualizzazione di presentazione del testo, ad esempio .Label

Importante

Le icone dei tipi di carattere possono essere specificate solo dalla relativa rappresentazione di caratteri Unicode.

L'esempio XAML seguente include un'icona a forma di carattere singola visualizzata da una Image visualizzazione:

<Image BackgroundColor="#D1D1D1">
    <Image.Source>
        <FontImageSource Glyph="&#xf30c;"
                         FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}"
                         Size="44" />
    </Image.Source>
</Image>

Questo codice visualizza un'icona XBox, dalla famiglia di tipi dicaratterei, in una Image visualizzazione. Si noti che mentre il carattere Unicode per questa icona è \uf30c, deve essere preceduto da un carattere di escape in XAML e quindi diventa &#xf30c;. Il codice C# equivalente è il seguente:

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

Lo screenshot seguente mostra diverse icone dei tipi di carattere visualizzate:

Screenshot of three font icons.

In alternativa, è possibile visualizzare un'icona del carattere con l'estensione FontImage di markup. Per altre informazioni, vedere Caricare un'icona del tipo di carattere.