Font dalam Xamarin.Forms

Artikel
11/04/2020

Secara default, Xamarin.Forms menggunakan font sistem yang ditentukan oleh setiap platform. Namun, kontrol yang menampilkan teks menentukan properti yang bisa Anda gunakan untuk mengubah font ini:

FontAttributes, dari jenis FontAttributes, yang merupakan enumerasi dengan tiga anggota: None, , Bolddan Italic. Nilai default properti ini adalah None.
FontSize, dari jenis double.
FontFamily, dari jenis string.

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

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. FontSize Properti dapat diatur ke nilai secara double langsung, atau dengan NamedSize nilai enumerasi:

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

Kode C# yang setara adalah:

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

Atau, Device.GetNamedSize metode memiliki penimpaan yang menentukan argumen kedua sebagai Element:

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

Catatan

Nilai FontSize , ketika ditentukan sebagai double, diukur dalam unit independen perangkat. Untuk informasi selengkapnya, lihat Satuan Pengukuran.

Untuk informasi selengkapnya tentang ukuran font bernama, lihat Memahami ukuran font bernama.

Mengatur keluarga font

Kontrol yang menampilkan teks dapat mengatur properti ke FontFamily nama keluarga font, seperti "Times Roman". Namun, ini hanya akan berfungsi jika keluarga font tersebut didukung pada platform tertentu.

Ada sejumlah teknik yang dapat digunakan untuk mencoba memperoleh font yang tersedia di platform. Namun, keberadaan file font TTF (True Type Format) tidak selalu menyiratkan keluarga font, dan TTF sering disertakan yang tidak dimaksudkan untuk digunakan dalam aplikasi. Selain itu, font yang diinstal pada platform dapat berubah dengan versi platform. Oleh karena itu, pendekatan yang paling dapat diandalkan untuk menentukan keluarga font adalah menggunakan font kustom.

Font kustom dapat ditambahkan ke proyek bersama Anda Xamarin.Forms dan digunakan oleh proyek platform tanpa pekerjaan tambahan. Proses untuk mencapai hal ini adalah sebagai berikut:

Tambahkan font ke proyek bersama Anda Xamarin.Forms sebagai sumber daya yang disematkan (Tindakan Build: EmbeddedResource).
Daftarkan file font dengan rakitan, dalam file seperti AssemblyInfo.cs, menggunakan ExportFont atribut . Alias opsional juga dapat ditentukan.

Contoh berikut menunjukkan font Lobster-Regular yang terdaftar di assembly, bersama dengan alias:

using Xamarin.Forms;

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

Catatan

Font dapat berada di folder apa pun dalam proyek bersama, tanpa harus menentukan nama folder saat mendaftarkan font dengan rakitan.

Pada Windows, nama file font dan nama font mungkin berbeda. Untuk menemukan nama font di Windows, klik kanan file .ttf dan pilih Pratinjau. Nama font kemudian dapat ditentukan dari jendela pratinjau.

Font kemudian dapat digunakan pada setiap platform dengan merujuk namanya, tanpa ekstensi file:

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

Atau, dapat dikonsumsi pada setiap platform dengan merujuk aliasnya:

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

Kode C# yang setara adalah:

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

Cuplikan layar berikut menunjukkan font kustom:

Penting

Untuk rilis build di Windows, pastikan rakitan yang berisi font kustom diteruskan sebagai argumen dalam Forms.Init panggilan metode. Untuk informasi selengkapnya, lihat Pemecahan masalah.

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 pada setiap platform:

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

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

Untuk informasi selengkapnya tentang menyediakan nilai khusus platform, lihat Menyediakan nilai khusus platform. Untuk informasi tentang OnPlatform ekstensi markup, lihat Ekstensi markup OnPlatform.

Memahami ukuran font bernama

Xamarin.Forms menentukan bidang dalam NamedSize enumerasi yang mewakili ukuran font tertentu. Tabel berikut menunjukkan anggotaNamedSize, dan ukuran defaultnya di iOS, Android, dan Platform Windows Universal (UWP):

Anggota	iOS	Android	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

Nilai ukuran diukur dalam unit independen perangkat. Untuk informasi selengkapnya, lihat Satuan Pengukuran.

Catatan

Di iOS dan Android, ukuran font bernama akan diskalakan otomatis berdasarkan opsi aksesibilitas sistem operasi. Perilaku ini dapat dinonaktifkan di iOS dengan platform khusus. Untuk informasi selengkapnya, lihat Penskalaan Aksesibilitas untuk Ukuran Font Bernama di iOS.

Tampilkan ikon font

Ikon font dapat ditampilkan oleh Xamarin.Forms aplikasi dengan menentukan data ikon font dalam objek FontImageSource . 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 font 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 di XAML dan menjadi . Kode C# yang setara adalah:

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

Cuplikan layar berikut menunjukkan beberapa ikon font yang ditampilkan oleh tata letak yang dapat diikat:

Cuplikan layar ikon font yang ditampilkan, di iOS dan Android

Bagikan melalui

Font dalam Xamarin.Forms

Mengatur atribut font

Mengatur ukuran font

Mengatur keluarga font

Mengatur properti font per platform

Memahami ukuran font bernama

Tampilkan ikon font

Sumber Daya Tambahan:

Bagikan melalui

Font dalam Xamarin.Forms

Mengatur atribut font

Mengatur ukuran font

Mengatur keluarga font

Mengatur properti font per platform

Memahami ukuran font bernama

Tampilkan ikon font

Tautan terkait

Sumber Daya Tambahan: