Czcionki w Xamarin.Forms

Artykuł
03/05/2024

Domyślnie Xamarin.Forms używa czcionki systemowej zdefiniowanej przez każdą platformę. Jednak kontrolki, które wyświetlają tekst definiują właściwości, których można użyć do zmiany tej czcionki:

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.
FontFamily, typu string.

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

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ść bezpośrednio lub według NamedSize wartości wyliczenia:

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

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

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

Label label2 = new Label
{
    Text = "Large font size",
    FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))
};

Alternatywnie Device.GetNamedSize metoda ma przesłonięć, która określa drugi argument jako Element:

Label myLabel = new Label
{
    Text = "Large font size",
};
myLabel.FontSize = Device.GetNamedSize(NamedSize.Large, myLabel);

Uwaga

Wartość FontSize , gdy jest określona doublejako , jest mierzona w jednostkach niezależnych od urządzenia. Aby uzyskać więcej informacji, zobacz Units of Measurement (Jednostki miary).

Aby uzyskać więcej informacji na temat nazwanych rozmiarów czcionek, zobacz Opis nazwanych rozmiarów czcionek.

Ustawianie rodziny czcionek

Kontrolki, które wyświetlają tekst, mogą ustawić FontFamily właściwość na nazwę rodziny czcionek, taką jak "Times Roman". Będzie to jednak działać tylko wtedy, gdy ta rodzina czcionek jest obsługiwana na określonej platformie.

Istnieje wiele technik, które mogą służyć do próby uzyskania czcionek dostępnych na platformie. Jednak obecność pliku czcionki TTF (True Type Format) nie musi oznaczać rodziny czcionek, a pliki TTF są często uwzględniane, które nie są przeznaczone do użytku w aplikacjach. Ponadto czcionki zainstalowane na platformie mogą zmieniać się przy użyciu wersji platformy. W związku z tym najbardziej niezawodne podejście do określania rodziny czcionek polega na użyciu niestandardowej czcionki.

Czcionki niestandardowe można dodawać do udostępnionego Xamarin.Forms projektu i używać ich przez projekty platformy bez dodatkowej pracy. Proces realizacji tego procesu jest następujący:

Dodaj czcionkę do Xamarin.Forms udostępnionego projektu jako zasób osadzony (Akcja kompilacji: EmbeddedResource).
Zarejestruj plik czcionki w zestawie, w pliku takim jak AssemblyInfo.cs, przy użyciu atrybutu ExportFont . Można również określić opcjonalny alias.

W poniższym przykładzie pokazano czcionkę Lobster-Regular zarejestrowaną w zestawie wraz z aliasem:

using Xamarin.Forms;

[assembly: ExportFont("Lobster-Regular.ttf", Alias = "Lobster")]

Uwaga

Czcionka może znajdować się w dowolnym folderze w projekcie udostępnionym bez konieczności określania nazwy folderu podczas rejestrowania czcionki w zestawie.

W systemie Windows nazwa pliku czcionki i nazwa czcionki mogą być inne. Aby odnaleźć nazwę czcionki w systemie Windows, kliknij prawym przyciskiem myszy plik .ttf i wybierz pozycję Podgląd. Następnie nazwę czcionki można określić w oknie podglądu.

Czcionkę można następnie używać na każdej platformie, odwołując się do jej nazwy bez rozszerzenia pliku:

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

Alternatywnie można go używać na każdej platformie, odwołując się do jej aliasu:

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

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

// Use font name
Label label1 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster-Regular"
};

// Use font alias
Label label2 = new Label
{
    Text = "Hello Xamarin.Forms!",
    FontFamily = "Lobster"
};

Na poniższych zrzutach ekranu przedstawiono czcionkę niestandardową:

Ważne

W przypadku kompilacji wydania w systemie Windows upewnij się, że zestaw zawierający czcionkę niestandardową jest przekazywany jako argument w wywołaniu Forms.Init metody. Aby uzyskać więcej informacji, zobacz Rozwiązywanie problemów.

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 na każdej platformie:

<Label Text="Different font properties on different platforms"
       FontSize="{OnPlatform iOS=20, Android=Medium, UWP=24}">
    <Label.FontFamily>
        <OnPlatform x:TypeArguments="x:String">
            <On Platform="iOS" Value="MarkerFelt-Thin" />
            <On Platform="Android" Value="Lobster-Regular" />
            <On Platform="UWP" Value="ArimaMadurai-Black" />
        </OnPlatform>
    </Label.FontFamily>
</Label>

Właściwość Device.RuntimePlatform 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 = Device.RuntimePlatform == Device.iOS ? 20 :
    Device.RuntimePlatform == Device.Android ? Device.GetNamedSize(NamedSize.Medium, label) : 24;
label.FontFamily = Device.RuntimePlatform == Device.iOS ? "MarkerFelt-Thin" :
   Device.RuntimePlatform == Device.Android ? "Lobster-Regular" : "ArimaMadurai-Black";

Aby uzyskać więcej informacji na temat udostępniania wartości specyficznych dla platformy, zobacz Zapewnianie wartości specyficznych dla platformy. Aby uzyskać informacje na temat OnPlatform rozszerzenia znaczników, zobacz OnPlatform markup extension (Rozszerzenie znaczników OnPlatform).

Opis nazwanych rozmiarów czcionek

Xamarin.Forms definiuje pola w wyliczenie NamedSize , które reprezentują określone rozmiary czcionek. W poniższej tabeli przedstawiono NamedSize elementy członkowskie i ich domyślne rozmiary w systemach iOS, Android i platforma uniwersalna systemu Windows (UWP):

Element członkowski	iOS	Android	Platforma UWP
`Default`	17	14	14
`Micro`	12	10	15.667
`Small`	14	14	18.667
`Medium`	17	17	22.667
`Large`	22	22	32
`Body`	17	16	14
`Header`	17	14	46
`Title`	28	24	24
`Subtitle`	22	16	20
`Caption`	12	12	12

Wartości rozmiaru są mierzone w jednostkach niezależnych od urządzenia. Aby uzyskać więcej informacji, zobacz Units of Measurement (Jednostki miary).

Uwaga

W systemach iOS i Android rozmiary czcionek o nazwach będą automatycznie skalowane na podstawie opcji ułatwień dostępu systemu operacyjnego. To zachowanie można wyłączyć w systemie iOS przy użyciu platformy specyficznej dla platformy. Aby uzyskać więcej informacji, zobacz Temat Accessibility Scaling for Named Font Sizes on iOS (Skalowanie ułatwień dostępu dla nazwanych rozmiarów czcionek w systemie iOS).

Wyświetlanie ikon czcionek

Ikony czcionek mogą być wyświetlane przez Xamarin.Forms aplikacje, 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.

Dane czcionek mogą być wyświetlane w dowolnym widoku, który może wyświetlać ImageSourceelement . 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 . Równoważny kod języka C# to:

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

Na poniższych zrzutach ekranu z przykładu Układy możliwe do powiązania przedstawiono kilka ikon czcionek wyświetlanych przez układ możliwy do powiązania:

Screenshot of font icons being displayed, on iOS and Android

Czcionki w Xamarin.Forms

Ustawianie atrybutów czcionki

Ustawianie rozmiaru czcionki

Ustawianie rodziny czcionek

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

Opis nazwanych rozmiarów czcionek

Wyświetlanie ikon czcionek

Pokrewne łącza

Dodatkowe zasoby