Udostępnij za pośrednictwem

Czcionki na platformie .NET MAUI

  • Artykuł

Domyślnie aplikacje interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) używają czcionki Open Sans na każdej platformie. Tę wartość domyślną można jednak zmienić, a dodatkowe czcionki można zarejestrować do użycia w aplikacji.

Wszystkie kontrolki, które wyświetlają tekst, definiują właściwości, które można ustawić w celu zmiany wyglądu czcionki:

  • FontFamily, typu string.
  • FontAttributes, typu FontAttributes, który jest wyliczeniem z trzema elementami członkowskimi: None, Boldi Italic. Wartość domyślna tej właściwości to None.
  • FontSize, typu double.
  • FontAutoScalingEnabled, typu bool, który określa, czy interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym. Wartość domyślna tej właściwości to true.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Wszystkie kontrolki, które wyświetlają tekst automatycznie używają skalowania czcionek, co oznacza, że interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym.

Rejestrowanie czcionek

Czcionki czcionki typu true (TTF) i czcionki typu otwartego (OTF) można dodawać do aplikacji i przywoływane przez nazwę pliku lub alias, przy czym rejestracja jest wykonywana w CreateMauiApp metodzie MauiProgram w klasie. Jest to realizowane przez wywołanie ConfigureFonts metody w MauiAppBuilder obiekcie . Następnie na obiekcie wywołaj IFontCollection metodę AddFont , aby dodać wymaganą czcionkę do aplikacji:

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

W powyższym przykładzie pierwszym argumentem AddFont metody jest nazwa pliku czcionki, a drugi argument reprezentuje opcjonalny alias, do którego można odwoływać się do czcionki podczas korzystania z niej.

Czcionkę można dodać do projektu aplikacji, przeciągając ją do folderu Resources\Fonts projektu, gdzie jego akcja kompilacji zostanie automatycznie ustawiona na mauiFont. Spowoduje to utworzenie odpowiedniego wpisu w pliku projektu. Alternatywnie wszystkie czcionki w aplikacji można zarejestrować przy użyciu symbolu wieloznakowego w pliku projektu:

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

Czcionki można również dodawać do innych folderów projektu aplikacji. Jednak w tym scenariuszu akcja kompilacji musi być ręcznie ustawiona na mauiFont w oknie Właściwości .

W czasie kompilacji czcionki są kopiowane do pakietu aplikacji. Aby uzyskać informacje na temat wyłączania tworzenia pakietów czcionek, zobacz Wyłączanie tworzenia pakietów czcionek.

Uwaga

Symbol * wieloznaczny wskazuje, że wszystkie pliki w folderze będą traktowane jako pliki czcionek. Ponadto jeśli chcesz również uwzględnić pliki z podfolderów, skonfiguruj je przy użyciu dodatkowych symboli wieloznacznych, na przykład Resources\Fonts\**\*.

Korzystanie z czcionek

Zarejestrowane czcionki można używać, ustawiając FontFamily właściwość kontrolki wyświetlającą tekst na nazwę czcionki bez rozszerzenia pliku:

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

Alternatywnie można go użyć, odwołując się do jego aliasu:

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

Równoważny kod języka C# to:

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

W systemie Android można używać następujących czcionek systemowych, ustawiając je jako wartość FontFamily właściwości:

  • monotyp
  • Serif
  • sans-serif (lub sansserif)
  • sans-serif-black (lub sansserif-black)
  • sans-serif-skondensowany (lub sansserif-skondensowany)
  • sans-serif-skondensowane światło (lub sansserif-skondensowane-światło)
  • sans-serif-light (lub sansserif-light)
  • sans-serif-medium (lub sansserif-medium)

Na przykład czcionka systemu monospace może być używana z następującym kodem XAML:

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

Równoważny kod języka C# to:

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

Ustawianie atrybutów czcionki

Kontrolki, które wyświetlają tekst, mogą ustawić FontAttributes właściwość w celu określenia atrybutów czcionki:

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

Równoważny kod języka C# to:

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

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

Ustawianie rozmiaru czcionki

Kontrolki, które wyświetlają tekst, mogą ustawić FontSize właściwość w celu określenia rozmiaru czcionki. Właściwość FontSize można ustawić na double wartość:

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

Równoważny kod języka C# to:

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

Uwaga

Wartość jest mierzona FontSize w jednostkach niezależnych od urządzenia.

Wyłączanie automatycznego skalowania czcionek

Wszystkie kontrolki, które wyświetlają tekst, mają domyślnie włączone skalowanie czcionek, co oznacza, że interfejs użytkownika aplikacji odzwierciedla preferencje skalowania tekstu ustawione w systemie operacyjnym. To zachowanie można jednak wyłączyć, ustawiając FontAutoScalingEnabled właściwość kontrolki falsena wartość :

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

Takie podejście jest przydatne, gdy chcesz zagwarantować, że tekst jest wyświetlany w określonym rozmiarze.

Uwaga

Automatyczne skalowanie czcionek działa również z ikonami czcionek. Aby uzyskać więcej informacji, zobacz Wyświetlanie ikon czcionek.

Ustawianie właściwości czcionki na platformę

Klasy OnPlatform i On mogą służyć w języku XAML do ustawiania właściwości czcionki na platformę. W poniższym przykładzie ustawiono różne rodziny czcionek i rozmiary:

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

Właściwość DeviceInfo.Platform może służyć w kodzie do ustawiania właściwości czcionki na platformę:

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

Aby uzyskać więcej informacji na temat udostępniania wartości specyficznych dla platformy, zobacz Informacje o urządzeniu. Aby uzyskać informacje na temat rozszerzenia znaczników, zobacz Dostosowywanie wyglądu interfejsu OnPlatform użytkownika na podstawie platformy.

Wyświetlanie ikon czcionek

Ikony czcionek mogą być wyświetlane przez aplikacje .NET MAUI, określając dane ikony czcionki w FontImageSource obiekcie. Ta klasa, która pochodzi z ImageSource klasy, ma następujące właściwości:

  • Glyph — wartość znaku Unicode ikony czcionki określona stringjako .
  • Size — wartość wskazująca double rozmiar w jednostkach niezależnych od urządzenia ikony czcionki renderowanej. Wartość domyślna to 30. Ponadto tę właściwość można ustawić na nazwany rozmiar czcionki.
  • FontFamily — reprezentująca rodzinę string czcionek, do której należy ikona czcionki.
  • Color — opcjonalna Color wartość, która ma być używana podczas wyświetlania ikony czcionki.

Te dane służą do tworzenia pliku PNG, który może być wyświetlany przez dowolny widok, który może wyświetlać element ImageSource. Takie podejście umożliwia wyświetlanie ikon czcionek, takich jak emoji, przez wiele widoków, w przeciwieństwie do ograniczania wyświetlania ikon czcionki do pojedynczego widoku przedstawiającego tekst, takiego jak Label.

Ważne

Ikony czcionek mogą być obecnie określone tylko przez ich reprezentację znaków Unicode.

Poniższy przykład XAML zawiera pojedynczą ikonę czcionki wyświetlaną Image przez widok:

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

Ten kod wyświetla ikonę XBox z rodziny czcionek Ionicons w Image widoku. Należy pamiętać, że mimo że znak Unicode dla tej ikony to \uf30c, musi zostać uniknięty w języku XAML, a więc staje się znakiem &#xf30c;. Równoważny kod języka C# to:

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

Poniższy zrzut ekranu przedstawia kilka wyświetlanych ikon czcionek:

Screenshot of three font icons.

Alternatywnie możesz wyświetlić ikonę czcionki z FontImage rozszerzeniem znaczników. Aby uzyskać więcej informacji, zobacz Ładowanie ikony czcionki.