Bagikan melalui

Font dalam .NET MAUI

  • Artikel

Secara default, aplikasi .NET Multi-platform App UI (.NET MAUI) menggunakan font Open Sans di setiap platform. Namun, default ini dapat diubah, dan font tambahan dapat didaftarkan untuk digunakan dalam aplikasi.

Semua kontrol yang menampilkan teks menentukan properti yang dapat diatur untuk mengubah tampilan font:

  • FontFamily, dari jenis string.
  • FontAttributes, dari jenis FontAttributes, yang merupakan enumerasi dengan tiga anggota: None, , Bolddan Italic. Nilai default properti ini adalah None.
  • FontSize, dari jenis double.
  • FontAutoScalingEnabled, dari jenis bool, yang menentukan apakah UI aplikasi mencerminkan preferensi penskalaan teks yang diatur dalam sistem operasi. Nilai default properti ini adalah true.

Properti ini didukung oleh BindableProperty objek, yang berarti bahwa properti ini dapat menjadi target pengikatan data, dan ditata.

Semua kontrol yang menampilkan teks secara otomatis menggunakan penskalakan font, yang berarti bahwa UI aplikasi mencerminkan preferensi penskalakan teks yang diatur dalam sistem operasi.

Mendaftarkan font

Font true type format (TTF) dan open type font (OTF) dapat ditambahkan ke aplikasi Anda dan direferensikan oleh nama file atau alias, dengan pendaftaran dilakukan dalam CreateMauiApp metode di MauiProgram kelas . Ini dicapai dengan memanggil ConfigureFonts metode pada MauiAppBuilder objek. Kemudian, pada IFontCollection objek, panggil AddFont metode untuk menambahkan font yang diperlukan ke aplikasi Anda:

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

Dalam contoh di atas, argumen pertama untuk AddFont metode adalah nama file font, sedangkan argumen kedua mewakili alias opsional yang fontnya dapat dirujuk saat mengonsumsinya.

Font dapat ditambahkan ke proyek aplikasi Anda dengan menyeretnya ke folder Resources\Fonts proyek, di mana tindakan build-nya akan secara otomatis diatur ke MauiFont. Ini membuat entri yang sesuai dalam file proyek Anda. Atau, semua font dalam aplikasi dapat didaftarkan dengan menggunakan kartubebas dalam file proyek Anda:

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

Font juga dapat ditambahkan ke folder lain dari proyek aplikasi Anda. Namun, dalam skenario ini tindakan build mereka harus diatur secara manual ke MauiFont di jendela Properti .

Pada waktu build, font disalin ke paket aplikasi Anda. Untuk informasi tentang menonaktifkan kemasan font, lihat Menonaktifkan kemasan font.

Catatan

Karakter * kartubebas menunjukkan bahwa semua file dalam folder akan diperlakukan sebagai file font. Selain itu, jika Anda ingin menyertakan file dari sub-folder juga, maka konfigurasikan menggunakan karakter wildcard tambahan, misalnya, Resources\Fonts\**\*.

Mengonsumsi font

Font terdaftar dapat digunakan dengan mengatur FontFamily properti kontrol yang menampilkan teks ke nama font, tanpa ekstensi file:

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

Atau, dapat dikonsumsi dengan mereferensikan aliasnya:

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

Kode C# yang setara adalah:

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

Di Android, font sistem berikut dapat digunakan dengan mengaturnya sebagai nilai FontFamily properti:

  • monospace
  • Serif
  • sans-serif (atau sansserif)
  • sans-serif-black (atau sansserif-black)
  • sans-serif-condensed (atau sansserif-condensed)
  • sans-serif-condensed-light (atau sansserif-condensed-light)
  • sans-serif-light (atau sansserif-light)
  • sans-serif-medium (atau sansserif-medium)

Misalnya, font sistem monospace dapat digunakan dengan XAML berikut:

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

Kode C# yang setara adalah:

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

Mengatur atribut font

Kontrol yang menampilkan teks dapat mengatur FontAttributes properti untuk menentukan atribut font:

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

Kode C# yang setara adalah:

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

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

Mengatur ukuran font

Kontrol yang menampilkan teks dapat mengatur FontSize properti untuk menentukan ukuran font. Properti FontSize dapat diatur ke double nilai:

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

Kode C# yang setara adalah:

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

Catatan

Nilai diukur FontSize dalam unit independen perangkat.

Menonaktifkan penskalakan otomatis font

Semua kontrol yang menampilkan teks memiliki penskalakan font yang diaktifkan secara default, yang berarti bahwa UI aplikasi mencerminkan preferensi penskalakan teks yang diatur dalam sistem operasi. Namun, perilaku ini dapat dinonaktifkan dengan mengatur FontAutoScalingEnabled properti pada kontrol berbasis teks ke false:

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

Pendekatan ini berguna ketika Anda ingin menjamin bahwa teks ditampilkan pada ukuran tertentu.

Catatan

Penskalakan otomatis font juga berfungsi dengan ikon font. Untuk informasi selengkapnya, lihat Menampilkan ikon font.

Mengatur properti font per platform

Kelas OnPlatform dan On dapat digunakan di XAML untuk mengatur properti font per platform. Contoh di bawah ini menetapkan keluarga dan ukuran font yang berbeda:

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

Properti DeviceInfo.Platform dapat digunakan dalam kode untuk mengatur properti font per 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";

Untuk informasi selengkapnya tentang menyediakan nilai khusus platform, lihat Informasi perangkat. Untuk informasi tentang OnPlatform ekstensi markup, lihat Menyesuaikan tampilan UI berdasarkan platform.

Tampilkan ikon font

Ikon font dapat ditampilkan oleh aplikasi .NET MAUI dengan menentukan data ikon font dalam FontImageSource objek. Kelas ini, yang berasal dari ImageSource kelas , memiliki properti berikut:

  • Glyph – nilai karakter unicode ikon font, ditentukan sebagai string.
  • Sizedouble– nilai yang menunjukkan ukuran, dalam unit independen perangkat, dari ikon font yang dirender. Nilai default adalah 30. Selain itu, properti ini dapat diatur ke ukuran font bernama.
  • FontFamily – mewakili string keluarga font tempat ikon font berada.
  • Color – nilai opsional Color yang akan digunakan saat menampilkan ikon font.

Data ini digunakan untuk membuat PNG, yang dapat ditampilkan oleh tampilan apa pun yang dapat menampilkan ImageSource. Pendekatan ini mengizinkan ikon font, seperti emoji, untuk ditampilkan oleh beberapa tampilan, dibandingkan dengan membatasi tampilan ikon font ke tampilan penyajian teks tunggal, seperti Label.

Penting

Ikon font saat ini hanya dapat ditentukan oleh representasi karakter unicode mereka.

Contoh XAML berikut memiliki ikon font tunggal yang ditampilkan oleh Image tampilan:

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

Kode ini menampilkan ikon XBox, dari keluarga font Ionicons, dalam Image tampilan. Perhatikan bahwa sementara karakter unicode untuk ikon ini adalah \uf30c, itu harus diloloskan &#xf30c;di XAML dan menjadi . Kode C# yang setara adalah:

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

Cuplikan layar berikut menunjukkan beberapa ikon font yang ditampilkan:

Screenshot of three font icons.

Atau, Anda dapat menampilkan ikon font dengan FontImage ekstensi markup. Untuk informasi selengkapnya, lihat Memuat ikon font.