Share via

Schriftarten in .NET MAUI

  • Artikel

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, eine Enumeration mit 3 Zahlen, None, Bold und 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 durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Alle Steuerelemente, die Text anzeigen, verwenden automatisch eine Schriftskalierung, d. h. die Benutzeroberfläche einer App spiegelt die im Betriebssystem festgelegten Einstellungen für die Textskalierung wider.

Registrieren von Schriftarten

Schriftarten im True Type Format (TTF) und Open Type Font (OTF) können zu Ihrer App hinzugefügt und über Dateinamen oder Alias referenziert werden, wobei die Registrierung in der Methode CreateMauiApp in der Klasse MauiProgram erfolgt. Dies wird durch den Aufruf der Methode ConfigureFonts auf dem Objekt MauiAppBuilder erreicht. Rufen Sie dann für das IFontCollection-Objekt die Methode AddFont auf, um Ihrer App die gewünschte 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 die Schriftart beim Konsumieren referenziert werden kann.

Eine Schriftart kann zu Ihrem App-Projekt hinzugefügt werden, indem Sie sie in den Ordner Resources des Projekts ziehen, wo ihre Build-Aktion automatisch auf MauiFont gesetzt wird. Dadurch wird ein entsprechender Eintrag in Ihrer Projektdatei erstellt. Alternativ können alle Schriftarten in der App registriert werden, indem Sie einen Platzhalter in Ihrer Projektdatei verwenden:

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

Schriftarten können auch anderen Ordnern Ihres App-Projekts hinzugefügt werden. In diesem Szenario muss jedoch die Erstellungsaktion im Fenster Eigenschaften manuell auf MauiFont gesetzt werden.

Zur Erstellungszeit werden Schriftarten in Ihr App-Paket kopiert. Informationen zum Deaktivieren der Schriftart-Paketierung finden Sie unter Schriftart-Paketierung deaktivieren.

Hinweis

Das Platzhalterzeichen * bedeutet, dass alle Dateien innerhalb des Ordners als Schriftdateien behandelt werden. Wenn Sie auch Dateien aus Unterordnern einbeziehen möchten, konfigurieren Sie dies mit zusätzlichen Platzhalterzeichen, z. B. Resources\Fonts\**\*.

Verwenden von Schriftarten

Registrierte Schriftarten können verwendet werden, indem sie die FontFamily-Eigenschaft eines Steuerelements festlegen, das Text auf den Schriftartnamen anzeigt, ohne die Dateierweiterung:

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

Alternativ kann sie verwendet werden, indem sie auf ihren Alias verweist:

<!-- 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
  • serif
  • sans-serif (oder sansserif)
  • 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 sansserif-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"
};

Schriftartattribute

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

Schriftgrad zurücksetzen

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

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

Der entsprechende C#-Code lautet:

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

Hinweis

Der FontSize-Wert wird in geräteunabhängigen Einheiten gemessen.

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 Eigenschaft FontAutoScalingEnabled bei textbasierten Steuerelementen auf false gesetzt 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.

Hinweis

Die automatische Skalierung der Schriftart funktioniert auch mit Schriftartsymbolen. Weitere Informationen finden Sie unter Schriftartsymbole anzeigen.

Festlegen von Schriftarteigenschaften pro Plattform

Die OnPlatform- und On-Klassen können in XAML verwendet werden, um Schrifteigenschaften 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 über die OnPlatform Markup-Erweiterung finden Sie unter Anpassen des Erscheinungsbildes der Benutzeroberfläche an die Plattform.

Anzeigen von Schriftartsymbolen

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

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

Mit diesen Daten wird ein PNG erstellt, das in jeder Ansicht angezeigt werden kann, die ein ImageSource anzeigen kann. Auf diese Weise können Schriftsymbole, wie z. B. Emojis, in mehreren Ansichten angezeigt werden, im Gegensatz zur Beschränkung der Anzeige von Schriftsymbolen auf eine einzige Textdarstellungsansicht, wie z. B. Label.

Wichtig

Schriftartsymbole können derzeit nur durch ihre Unicode-Zeichendarstellung angegeben werden.

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 zwar \uf30c lautet, in XAML aber in &#xf30c; umgewandelt werden muss. 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:

Screenshot of three font icons.

Alternativ können Sie ein Schriftartsymbol mit der FontImage-Markuperweiterung anzeigen. Weitere Informationen finden Sie unter Laden eines Schriftartsymbols.