Schriftarten in .NET MAUI

Standardmäßig verwenden .NET Multi-Platform App UI (.NET MAUI)-Apps die Open Sans-Schriftart auf jeder Plattform. Dieser Standardwert kann jedoch geändert werden, und zusätzliche Schriftarten können für die Verwendung in einer App registriert werden.

Alle Steuerelemente, die Text anzeigen, definieren Eigenschaften, die festgelegt werden können, um die Schriftartdarstellung zu ändern:

• FontFamily, vom Typ string.
• FontAttributes, vom Typ FontAttributes, die eine Aufzählung mit drei Membern ist: None, , Boldund Italic. Der Standardwert dieser Eigenschaft ist None.
• FontSize, vom Typ double.
• FontAutoScalingEnabled, vom Typ bool, der definiert, ob die Benutzeroberfläche einer App Textskalierungseinstellungen widerspiegelt, die im Betriebssystem festgelegt sind. Der Standardwert dieser Eigenschaft ist true.

Diese Eigenschaften werden von BindableProperty-Objekten unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können.

Alle Steuerelemente, die Text anzeigen, verwenden automatisch die Schriftskalierung, was bedeutet, dass die Benutzeroberfläche einer App textskalierungseinstellungen widerspiegelt, die im Betriebssystem festgelegt sind.

Registrieren von Schriftarten

True Type Format (TTF)- und Open Type Font (OTF)-Schriften können zu Ihrer App hinzugefügt und über den Dateinamen oder Alias referenziert werden, wobei die Registrierung in der CreateMauiApp-Methode in der MauiProgram-Klasse durchgeführt wird. Dies wird durch Aufrufen der ConfigureFonts Methode für das MauiAppBuilder Objekt erreicht. Rufen Sie dann im IFontCollection Objekt die AddFont Methode auf, um der App die erforderliche Schriftart hinzuzufügen:

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

Im obigen Beispiel ist das erste Argument der AddFont-Methode der Dateiname der Schriftart, während das zweite Argument einen optionalen Alias darstellt, über den auf die Schriftart verwiesen werden kann, wenn sie verwendet wird.

Ihrem App-Projekt kann eine Schriftart hinzugefügt werden, indem Sie sie in den Ordner "Ressourcen\Schriftarten" des Projekts ziehen, in dem die Buildaktion automatisch auf "MauiFont" festgelegt wird. Dadurch wird ein entsprechender Eintrag in der Projektdatei erstellt. Alternativ können alle Schriftarten in der App mithilfe eines Wildcards in Ihrer Projektdatei registriert werden:

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

Schriftarten können auch anderen Ordnern Ihres App-Projekts hinzugefügt werden. In diesem Szenario muss die Buildaktion jedoch im Eigenschaftenfenster manuell auf MauiFont festgelegt werden.

Zur Build-Zeit werden Schriftarten in Ihr Anwendungspaket kopiert. Informationen zum Deaktivieren der Schriftarten-Paketierung finden Sie unter "Deaktivieren der Schriftarten-Paketierung".

Verwenden von Schriftarten

Registrierte Schriftarten können verwendet werden, indem die FontFamily-Eigenschaft eines Steuerelements, das Text anzeigt, auf den Schriftartnamen ohne Dateierweiterung gesetzt wird.

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

Alternativ kann es durch Referenzieren seines Alias verwendet werden:

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

Der entsprechende C#-Code lautet:

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

Unter Android können die folgenden Systemschriftarten verwendet werden, indem sie als Wert der FontFamily Eigenschaft festgelegt werden:

• Monospace
• Serife
• serifenlos (oder sans-serif)
• sans-serif-black (oder sansserif-black)
• sans-serif-kondensiert (oder sansserif-kondensiert)
• sans-serif-kondensed-light (oder sansserif-kondensed-light)
• sans-serif-light (oder sansserif-light)
• sans-serif-medium (oder sans-serif-medium)

Die Schriftart des Monospace-Systems kann beispielsweise mit dem folgenden XAML-Code verwendet werden:

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

Der entsprechende C#-Code lautet:

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

Festlegen von Schriftartattributen

Steuerelemente, die Text anzeigen, können die FontAttributes Eigenschaft so festlegen, dass Schriftartattribute angegeben werden:

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

Der entsprechende C#-Code lautet:

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

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

Schriftgröße festlegen

Steuerelemente, die Text anzeigen, können die FontSize Eigenschaft so festlegen, dass der Schriftgrad angegeben wird. Die FontSize Eigenschaft kann auf einen double Wert festgelegt werden:

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

Der entsprechende C#-Code lautet:

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

Automatische Skalierung der Schriftart deaktivieren

Für alle Steuerelemente, die Text anzeigen, ist die Schriftskalierung standardmäßig aktiviert. Dies bedeutet, dass die Benutzeroberfläche einer App textskalierungseinstellungen widerspiegelt, die im Betriebssystem festgelegt sind. Dieses Verhalten kann jedoch deaktiviert werden, indem die FontAutoScalingEnabled Eigenschaft auf textbasierten Steuerelementen auf falseFolgendes festgelegt wird:

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

Dieser Ansatz ist nützlich, wenn Sie sicherstellen möchten, dass Text in einer bestimmten Größe angezeigt wird.

Festlegen von Schriftarteigenschaften pro Plattform

Die OnPlatform und On Klassen können in XAML verwendet werden, um Schriftarteigenschaften pro Plattform festzulegen. Im folgenden Beispiel werden verschiedene Schriftfamilien und Schriftgrade festgelegt:

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

Die DeviceInfo.Platform Eigenschaft kann im Code zum Festlegen von Schriftarteigenschaften pro Plattform verwendet werden:

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

Weitere Informationen zum Bereitstellen plattformspezifischer Werte finden Sie unter "Geräteinformationen". Informationen zur Markuperweiterung finden Sie unter Anpassen der OnPlatformUi-Darstellung basierend auf der Plattform.

Symbole für Schriftarten anzeigen

Schriftartsymbole können von .NET MAUI-Apps angezeigt werden, indem sie die Schriftartsymboldaten in einem FontImageSource Objekt angeben. Diese Klasse, die von der ImageSource Klasse abgeleitet wird, weist die folgenden Eigenschaften auf:

• Glyph – der Unicode-Zeichenwert des Schriftartsymbols, angegeben als ein string.
• Size – ein double Wert, der die Größe des gerenderten Schriftartsymbols in geräteunabhängigen Einheiten angibt. Der Standardwert ist 30. Darüber hinaus kann diese Eigenschaft auf einen benannten Schriftgrad festgelegt werden. Weitere Informationen zu geräteunabhängigen Einheiten finden Sie unter Geräteunabhängige Einheiten.
• FontFamily – eine string Darstellung der Schriftfamilie, zu der das Schriftartsymbol gehört.
• Color – Ein optionaler Color Wert, der beim Anzeigen des Schriftartsymbols verwendet werden soll.

Diese Daten werden verwendet, um ein PNG zu erstellen, das von jedem Anzeigefenster dargestellt werden kann, das eine ImageSource anzeigen kann. Bei diesem Ansatz können Schriftartsymbole, wie Emojis, von mehreren Ansichten angezeigt werden, anstatt die Anzeige von Schriftartsymbolen auf eine einzige Textanzeigeansicht, wie eine Label, zu beschränken.

Das folgende XAML-Beispiel weist ein einzelnes Schriftartsymbol auf, das von einer Image Ansicht angezeigt wird:

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

Dieser Code zeigt ein XBox-Symbol aus der Schriftfamilie Ionicons in einer Image Ansicht an. Beachten Sie, dass das Unicode-Zeichen für dieses Symbol \uf30c in XAML escaped werden muss und daher zu  wird. Der entsprechende C#-Code lautet:

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

Der folgende Screenshot zeigt mehrere Schriftartsymbole, die angezeigt werden: