Sdílet prostřednictvím

Písma v .NET MAUI

  • Článek

Ve výchozím nastavení používají aplikace .NET Multi-Platform App UI (.NET MAUI) písmo Open Sans na každé platformě. Toto výchozí nastavení ale můžete změnit a další písma je možné zaregistrovat pro použití v aplikaci.

Všechny ovládací prvky, které zobrazují text definují vlastnosti, které lze nastavit tak, aby změnily vzhled písma:

  • FontFamily, typu string.
  • FontAttributes, typu FontAttributes, který je výčtem se třemi členy: None, Bolda Italic. Výchozí hodnota této vlastnosti je None.
  • FontSize, typu double.
  • FontAutoScalingEnabled, typu bool, který definuje, zda uživatelské rozhraní aplikace odráží předvolby škálování textu nastavené v operačním systému. Výchozí hodnota této vlastnosti je true.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Všechny ovládací prvky, které zobrazují text, automaticky používají měřítko písma, což znamená, že uživatelské rozhraní aplikace odráží předvolby škálování textu nastavené v operačním systému.

Registrace písem

Do aplikace lze přidat písma typu True type (TTF) a písma typu open type (OTF) a odkazovat na ni pomocí názvu souboru nebo aliasu s registrací prováděnou CreateMauiApp v metodě ve MauiProgram třídě. Toho se dosahuje vyvoláním ConfigureFonts metody v objektu MauiAppBuilder . IFontCollection Potom na objektu zavolejte metoduAddFont, která do aplikace přidá požadované písmo:

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

V předchozím příkladu je prvním argumentem AddFont metody název souboru písma, zatímco druhý argument představuje volitelný alias, pomocí kterého lze písmo při jeho využívání odkazovat.

Písmo můžete do projektu aplikace přidat tak, že ho přetáhnete do složky Resources\Fonts projektu, kde se akce sestavení automaticky nastaví na MauiFont. Tím se vytvoří odpovídající položka v souboru projektu. Případně můžete všechna písma v aplikaci zaregistrovat pomocí zástupné znaky v souboru projektu:

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

Písma je možné přidat také do jiných složek projektu aplikace. V tomto scénáři však musí být jejich akce sestavení ručně nastavena na MauiFont v okně Vlastnosti .

V době sestavení se písma zkopírují do balíčku aplikace. Informace o zakázání balení písem naleznete v tématu Zakázání balení písem.

Poznámka:

Zástupný * znak označuje, že všechny soubory ve složce budou považovány za soubory písem. Kromě toho, pokud chcete zahrnout soubory z podsložek, pak ho nakonfigurujte pomocí dalších zástupných znaků, Resources\Fonts\**\*například .

Využívání písem

Registrovaná písma je možné využívat nastavením FontFamily vlastnosti ovládacího prvku, který zobrazuje text na název písma bez přípony souboru:

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

Alternativně ho můžete využít odkazem na jeho alias:

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

Ekvivalentní kód jazyka C# je:

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

V Androidu je možné použít následující systémová písma tak, že je nastavíte jako hodnotu FontFamily vlastnosti:

  • neproporcionální
  • Serif
  • sans-serif (nebo sansserif)
  • sans-serif-black (nebo sansserif-black)
  • sans-serif-condensed (nebo sansserif-condensed)
  • sans-serif-condensed-light (nebo sansserif-condensed-light)
  • sans-serif-light (nebo sansserif-light)
  • sans-serif-medium (nebo sansserif-medium)

Například systémové písmo monospace lze použít pomocí následujícího kódu XAML:

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

Ekvivalentní kód jazyka C# je:

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

Nastavení atributů písma

Ovládací prvky, které zobrazují text, můžou vlastnost nastavit FontAttributes tak, aby určily atributy písma:

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

Ekvivalentní kód jazyka C# je:

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

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

Nastavení velikosti písma

Ovládací prvky, které zobrazují text, můžou vlastnost nastavit FontSize tak, aby určily velikost písma. Vlastnost FontSize lze nastavit na double hodnotu:

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

Ekvivalentní kód jazyka C# je:

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

Poznámka:

Hodnota FontSize se měří v jednotkách nezávislých na zařízeních.

Zakázání automatického škálování písma

Všechny ovládací prvky, které zobrazují text, mají ve výchozím nastavení povolené škálování písma, což znamená, že uživatelské rozhraní aplikace odráží předvolby škálování textu nastavené v operačním systému. Toto chování však může být zakázáno nastavením vlastnosti u textového FontAutoScalingEnabled ovládacího prvku na false:

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

Tento přístup je užitečný v případě, že chcete zaručit, že se text zobrazí v určité velikosti.

Poznámka:

Automatické škálování písma funguje také s ikonami písem. Další informace naleznete v tématu Zobrazení ikon písem.

Nastavení vlastností písma na platformu

Třídy OnPlatform a On třídy lze v XAML použít k nastavení vlastností písma na platformu. Následující příklad nastaví různé rodiny a velikosti písem:

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

Vlastnost DeviceInfo.Platform lze použít v kódu k nastavení vlastností písma na platformu:

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

Další informace o poskytování hodnot specifických pro platformu najdete v tématu Informace o zařízení. Informace o OnPlatform rozšíření značek naleznete v tématu Přizpůsobení vzhledu uživatelského rozhraní na základě platformy.

Zobrazení ikon písem

Ikony písem můžou aplikace .NET MAUI zobrazit zadáním dat ikon písma v objektu FontImageSource . Tato třída, která je odvozena od ImageSource třídy, má následující vlastnosti:

  • Glyph– hodnota znaku unicode ikony písma, určená jako znak .string
  • Sizedouble– hodnota, která označuje velikost v jednotkách nezávislých na zařízení u ikony vykresleného písma. Výchozí hodnota je 30. Kromě toho lze tuto vlastnost nastavit na pojmenovanou velikost písma.
  • FontFamily – představuje string rodinu písem, do které patří ikona písma.
  • Color – volitelná Color hodnota, která se má použít při zobrazení ikony písma.

Tato data slouží k vytvoření png, který lze zobrazit libovolným zobrazením, které může zobrazit ImageSource. Tento přístup umožňuje zobrazování ikon písem, jako jsou emoji, více zobrazení, na rozdíl od omezení zobrazení ikon písma na jeden text, který prezentuje, například Label.

Důležité

Ikony písem lze v současné době specifikovat pouze pomocí jejich reprezentace znaků Unicode.

Následující příklad XAML obsahuje jednu ikonu písma zobrazenou zobrazením Image :

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

Tento kód zobrazí v zobrazení ikonu XBox z rodiny Image písem Ionicons. Všimněte si, že zatímco znak unicode pro tuto ikonu je \uf30c, musí být řídicí znak v XAML a tak se stává &#xf30c;. Ekvivalentní kód jazyka C# je:

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

Následující snímek obrazovky ukazuje několik zobrazených ikon písem:

Screenshot of three font icons.

Alternativně můžete zobrazit ikonu písma s rozšířením FontImage značek. Další informace najdete v tématu Načtení ikony písma.