Blog ini akan membincangkan tentang penggunaan peraturan CSS @font-face.
Apakah Peraturan CSS @font-face?
Peraturan @font-face dalam CSS digunakan untuk membuat fon tersuai untuk projek kami. Fon ini boleh dimuatkan daripada pelayan atau fon yang dipasang oleh sistem.
Bagaimana untuk Menggunakan Peraturan @font-face CSS?
Sintaks untuk menggunakan peraturan CSS @font-face disebutkan di bawah:
@font-face {
font-family : MyNewFont ;
src : url ( )
}
Peraturan @font-face ditakrifkan dengan menentukan nilai dalam sifat fon-family dan URL berkaitan dari mana fon ini terletak sebagai atribut src.
Contoh
Dalam contoh di bawah, kami akan menyesuaikan fon. Untuk berbuat demikian, mula-mula, muat turun fon daripada penyemak imbas dan tambahkannya pada folder projek anda. Anda juga boleh menggunakan pautan jika anda menggunakan fon daripada pelayan.
Mula-mula, tambahkan teg
dan , kemudian gunakan untuk menyesuaikan fon pada setiap fon tersebut. Mari kita laksanakan senario yang diterangkan di atas dalam tiga langkah.
Langkah 1: Tambahkan Elemen pada fail HTML
Langkah 1: Tambahkan Elemen pada fail HTML
Dalam HTML, di dalam bahagian
, tambahkan dan untuk menambah beberapa kandungan yang berkaitan dengan halaman web:
< h2 > Selamat datang ke Linuxhint! < / h2 >
< h1 > Selamat datang ke Linuxhint! < / h1 >
Langkah 2: Tentukan Peraturan @font-face dalam CSS
< h2 > Selamat datang ke Linuxhint! < / h2 >
< h1 > Selamat datang ke Linuxhint! < / h1 >
Langkah 2: Tentukan Peraturan @font-face dalam CSS
Untuk menentukan peraturan, kata kunci ' @font-face ” digunakan dalam CSS. Di dalam kurungan kerintingnya, tambahkan sifat keluarga fon dan tambahkan nama fon sebagai nilainya. Kemudian, gunakan sifat src untuk menentukan laluan URL fon yang dimuat turun:
@font-face {
font-family : myfont ;
src : url ( '/fonts/Batuphat\ Script.otf' ) ;
}
Begitu juga, kami akan menambah satu lagi blok fon tersuai:
@font-face {font-family : myfont2 ;
src : url ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Sekarang, gunakan penggayaan pada elemen
dan .
Elemen gaya h2
h2 {
font-family : myfont ;
Saiz huruf : 50px ;
}
Elemen gaya h2
h2 {font-family : myfont ;
Saiz huruf : 50px ;
}
Sifat yang digunakan pada elemen
dijelaskan di bawah:
- “ font-family ” ditetapkan dengan nilai “ myfont ” itulah yang telah kami isytiharkan dalam peraturan @font-face.
- “ Saiz huruf ” property menetapkan saiz fon kepada 50px.
Elemen gaya h1
h1 {
font-family : myfont2 ;
Saiz huruf : 70px ;
warna : coklat ;
}
Di sini ' warna ” property digunakan untuk mewarna fon.
Ia boleh dilihat daripada imej yang disediakan di bawah bahawa teg
dan berjaya digayakan dengan fon yang baru diisytiharkan:
Kami telah menyediakan kaedah untuk menggunakan peraturan CSS @font-face.
Kesimpulan
Gaya fon memainkan peranan penting dalam menjadikan sebarang aplikasi menarik secara estetik. Sistem kami mempunyai gaya fon yang terhad, manakala pembangun memerlukan fon yang berbeza untuk menambahkan pengindahan pada apl web mereka. Untuk berbuat demikian, CSS membenarkan kami menggunakan peraturan @font-face untuk menambah fon tersuai. Artikel ini telah menunjukkan peraturan @font-face yang melaluinya anda boleh menyesuaikan gaya fon dalam aplikasi kami.