Aracılığıyla paylaş

.NET MAUI'de yazı tipleri

  • Makale

Varsayılan olarak, .NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamaları her platformda Open Sans yazı tipini kullanır. Ancak, bu varsayılan değiştirilebilir ve uygulamada kullanmak üzere ek yazı tipleri kaydedilebilir.

Metni görüntüleyen tüm denetimler, yazı tipi görünümünü değiştirmek için ayarlanabilen özellikleri tanımlar:

  • FontFamily, türündedir string.
  • FontAttributes, türüne FontAttributesgöre üç üyesi olan bir sabit listesidir: None, Boldve Italic. Bu özelliğin varsayılan değeridir None.
  • FontSize, türündedir double.
  • FontAutoScalingEnabled, türündeki boolbir uygulamanın kullanıcı arabiriminin işletim sisteminde ayarlanan metin ölçeklendirme tercihlerini yansıtıp yansıtmadığını tanımlar. Bu özelliğin varsayılan değeridir true.

Bu özellikler nesneler tarafından BindableProperty desteklenir; bu da veri bağlamalarının hedefleri olabileceği ve stillendirilebileceği anlamına gelir.

Metin görüntüleyen tüm denetimler otomatik olarak yazı tipi ölçeklendirmeyi kullanır. Bu, bir uygulamanın kullanıcı arabiriminin işletim sisteminde ayarlanan metin ölçeklendirme tercihlerini yansıttığını gösterir.

Yazı tiplerini kaydetme

Uygulamanıza doğru tür biçimi (TTF) ve açık tür yazı tipi (OTF) yazı tipleri eklenebilir ve dosya adı veya diğer ad tarafından başvurulabilir ve sınıftaki yönteminde CreateMauiApp MauiProgram kayıt gerçekleştirilebilir. Bu, nesnesi üzerinde ConfigureFonts MauiAppBuilder yöntemini çağırarak gerçekleştirilir. Ardından nesnesinde IFontCollection , gerekli yazı tipini uygulamanıza eklemek için yöntemini çağırın AddFont :

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

Yukarıdaki örnekte, yöntemin AddFont ilk bağımsız değişkeni yazı tipi dosya adıdır, ikinci bağımsız değişken ise kullanılırken yazı tipine başvurulabilecek isteğe bağlı bir diğer adı temsil eder.

Uygulama projenize, derleme eyleminin otomatik olarak MauiFont olarak ayarlanacağı Resources\Fonts klasörüne sürükleyerek bir yazı tipi eklenebilir. Bu, proje dosyanızda karşılık gelen bir girdi oluşturur. Alternatif olarak, uygulamadaki tüm yazı tipleri proje dosyanızda joker karakter kullanılarak kaydedilebilir:

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

Yazı tipleri, uygulama projenizin diğer klasörlerine de eklenebilir. Ancak, bu senaryoda derleme eyleminin Özellikler penceresinde el ile MauiFont olarak ayarlanması gerekir.

Derleme zamanında yazı tipleri uygulama paketinize kopyalanır. Yazı tipi paketlemesini devre dışı bırakma hakkında bilgi için bkz . Yazı tipi paketlemeyi devre dışı bırakma.

Dekont

Joker * karakter, klasördeki tüm dosyaların yazı tipi dosyaları olarak kabul edildiğini gösterir. Buna ek olarak, alt klasörlerdeki dosyaları da eklemek istiyorsanız, ek joker karakterler kullanarak yapılandırın; örneğin, Resources\Fonts\**\*.

Yazı tiplerini kullanma

Kayıtlı yazı tipleri, dosya uzantısı olmadan metni yazı tipi adına görüntüleyen bir denetimin özelliği ayarlanarak FontFamily kullanılabilir:

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

Alternatif olarak, diğer adına başvurarak da kullanılabilir:

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

Eşdeğer C# kodu:

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

Android'de, aşağıdaki sistem yazı tipleri özelliğin FontFamily değeri olarak ayarlanarak kullanılabilir:

  • tek aralıklı
  • Serif
  • sans-serif (veya sansserif)
  • sans-serif-black (veya sansserif-black)
  • sans-serif-condensed (veya sansserif-condensed)
  • sans-serif-condensed-light (veya sansserif-condensed-light)
  • sans-serif-light (veya sansserif-light)
  • sans-serif-medium (veya sansserif-medium)

Örneğin, monospace sistem yazı tipi aşağıdaki XAML ile kullanılabilir:

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

Eşdeğer C# kodu:

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

Yazı tipi özniteliklerini ayarlama

Metin görüntüleyen denetimler, yazı tipi özniteliklerini belirtmek için özelliğini ayarlayabilir FontAttributes :

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

Eşdeğer C# kodu:

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

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

Yazı tipi boyutunu ayarlama

Metin görüntüleyen denetimler, yazı tipi boyutunu belirtmek için özelliğini ayarlayabilir FontSize . FontSize özelliği bir double değere ayarlanabilir:

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

Eşdeğer C# kodu:

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

Dekont

Değer FontSize cihazdan bağımsız birimler halinde ölçülür.

Yazı tipi otomatik ölçeklendirmesini devre dışı bırakma

Metin görüntüleyen tüm denetimlerde yazı tipi ölçeklendirmesi varsayılan olarak etkindir; bu da bir uygulamanın kullanıcı arabiriminin işletim sisteminde ayarlanan metin ölçeklendirme tercihlerini yansıttığını gösterir. Ancak, metin tabanlı denetimlerde FontAutoScalingEnabled falseözelliği olarak ayarlanarak bu davranış devre dışı bırakılabilir:

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

Bu yaklaşım, metnin belirli bir boyutta görüntüleneceğini garanti etmek istediğinizde kullanışlıdır.

Dekont

Yazı tipi otomatik ölçeklendirme, yazı tipi simgeleriyle de çalışır. Daha fazla bilgi için bkz . Yazı tipi simgelerini görüntüleme.

Platform başına yazı tipi özelliklerini ayarlama

OnPlatform ve On sınıfları platform başına yazı tipi özelliklerini ayarlamak için XAML'de kullanılabilir. Aşağıdaki örnek, farklı yazı tipi ailelerini ve boyutlarını ayarlar:

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

özelliği DeviceInfo.Platform , platform başına yazı tipi özelliklerini ayarlamak için kodda kullanılabilir:

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

Platforma özgü değerler sağlama hakkında daha fazla bilgi için bkz . Cihaz bilgileri. İşaretlemeyi genişletme hakkında OnPlatform daha fazla bilgi için bkz . Platforma göre kullanıcı arabirimi görünümünü özelleştirme.

Yazı tipi simgelerini görüntüleme

Yazı tipi simgeleri bir nesnedeki FontImageSource yazı tipi simgesi verileri belirtilerek .NET MAUI uygulamaları tarafından görüntülenebilir. sınıfından ImageSource türetilen bu sınıf aşağıdaki özelliklere sahiptir:

  • Glyph – yazı tipi simgesinin unicode karakter değeri, olarak stringbelirtilir.
  • Sizedouble– cihazdan bağımsız birimlerde işlenen yazı tipi simgesinin boyutunu gösteren bir değerdir. Varsayılan değer 30’dur. Ayrıca, bu özellik adlandırılmış yazı tipi boyutuna ayarlanabilir.
  • FontFamilystring– yazı tipi simgesinin ait olduğu yazı tipi ailesini temsil eden.
  • Color – yazı tipi simgesi görüntülenirken kullanılacak isteğe bağlı Color bir değerdir.

Bu veriler, görüntüleyebilen herhangi bir görünüm tarafından görüntülenebilen bir ImageSourcePNG oluşturmak için kullanılır. Bu yaklaşım, yazı tipi simgesinin görüntülenmesini sınırlandırmak yerine, emojiler gibi yazı tipi simgelerinin birden çok görünüm tarafından görüntülenmesine izin verir.Label

Önemli

Yazı tipi simgeleri şu anda yalnızca unicode karakter gösterimleriyle belirtilebilir.

Aşağıdaki XAML örneğinde bir görünüm tarafından görüntülenen tek bir Image yazı tipi simgesi vardır:

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

Bu kod, Ionicons yazı tipi ailesinden bir XBox simgesini bir Image görünümde görüntüler. Bu simgenin unicode karakteri olduğunda \uf30c, XAML'de kaçış karakterine sahip olması ve bu şekilde olması &#xf30c;gerektiğini unutmayın. Eşdeğer C# kodu:

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

Aşağıdaki ekran görüntüsünde görüntülenen birkaç yazı tipi simgesi gösterilmektedir:

Screenshot of three font icons.

Alternatif olarak, işaretleme uzantısına FontImage sahip bir yazı tipi simgesi görüntüleyebilirsiniz. Daha fazla bilgi için bkz . Yazı tipi simgesi yükleme.