Blog ini akan membahas tentang penggunaan aturan CSS @font-face.
Apa itu Aturan CSS @font-face?
Aturan @font-face di CSS digunakan untuk membuat font khusus untuk proyek kita. Font ini dapat dimuat dari server atau font yang diinstal sistem.
Bagaimana Cara Menggunakan Aturan @font-face CSS?
Sintaks untuk menggunakan aturan @font-face CSS disebutkan di bawah ini:
@font-wajah {
font-family : MyNewFont ;
src : url ( )
}
Aturan @font-face ditentukan dengan menentukan nilai dalam properti font-family dan URL terkait dari tempat font ini berada sebagai atribut src.
Contoh
Pada contoh di bawah ini, kami akan menyesuaikan font. Untuk melakukannya, pertama, unduh font dari browser dan tambahkan ke folder proyek Anda. Anda juga dapat menggunakan tautan jika menggunakan font dari server.
Pertama, tambahkan tag
dan , lalu terapkan untuk menyesuaikan font pada masing-masing tag. Mari terapkan skenario yang dijelaskan di atas dalam tiga langkah.
Langkah 1: Tambahkan Elemen ke file HTML
Langkah 1: Tambahkan Elemen ke file HTML
Di HTML, di dalam bagian
, tambahkan dan untuk menambahkan beberapa konten yang terkait dengan halaman web:
< h2 > Selamat datang di Linuxint! < / h2 >
< h1 > Selamat datang di Linuxint! < / h1 >
Langkah 2: Tentukan Aturan @font-face di CSS
< h2 > Selamat datang di Linuxint! < / h2 >
< h1 > Selamat datang di Linuxint! < / h1 >
Langkah 2: Tentukan Aturan @font-face di CSS
Untuk menentukan aturan, kata kunci “ @font-wajah ” digunakan dalam CSS. Di dalam kurung kurawal, tambahkan properti font-family dan tambahkan nama font sebagai nilainya. Kemudian, gunakan properti src untuk menentukan jalur URL dari font yang diunduh:
@font-wajah {
font-family : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Demikian pula, kami akan menambahkan blok font khusus lainnya:
@font-wajah {font-family : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Sekarang, terapkan gaya pada elemen
dan .
Gaya elemen h2
h2 {
font-family : myfont ;
ukuran huruf : 50px ;
}
Gaya elemen h2
h2 {font-family : myfont ;
ukuran huruf : 50px ;
}
Properti yang diterapkan pada elemen
dijelaskan di bawah ini:
- “ font-family ” diatur dengan nilai “ myfont ” yang telah kami nyatakan dalam aturan @font-face.
- “ ukuran huruf ” mengatur ukuran font menjadi 50px.
Gaya elemen h1
h1 {
font-family : myfont2 ;
ukuran huruf : 70px ;
warna : cokelat ;
}
Di sini “ warna ” properti digunakan untuk mewarnai font.
Dapat dilihat dari gambar di bawah ini bahwa tag
dan berhasil ditata dengan font yang baru dideklarasikan:
Kami telah menyediakan metode untuk menggunakan aturan CSS @font-face.
Kesimpulan
Gaya font memainkan peran penting dalam membuat aplikasi apa pun menarik secara estetika. Sistem kami memiliki gaya font yang terbatas, sementara pengembang memerlukan font yang berbeda untuk menambah keindahan pada aplikasi web mereka. Untuk melakukannya, CSS memungkinkan kita menggunakan aturan @font-face untuk menambahkan font kustom. Artikel ini telah mendemonstrasikan aturan @font-face di mana Anda dapat menyesuaikan gaya font di aplikasi kami.