Tutorial Mengatur Font Dengan Class HTML Dengan CSS
Setelah sebelumnya kita mempelajari aturan dasar dalam penulisan tag CSS, maka pada tutorial kali ini kita akan mempelajari cara mengatur fotn dengan class HTML dengan CSS
Font merupakan komponen yang cukup sensitif. Selain layout, font juga yang membangun sebuah kultur dalam web sementara di luar sana sangat banyak font family yang perlu Anda explore.
Tidak hanya font family (jenis font), tetapi Anda juga perlu memperhatikan detail dari font tersebut, mulai dari ketebalan font nya, size (ukuran) dasar dari font tersebut, style atau gaya pada font, dan tentu nya adalah warna.
Oleh karena itu Tutorial kali ini, Anda akan diperkenalkan bagaimana mengatur font sedemikian rupa sehingga dapat sesuai dengan ekspetasi Anda maupun client Anda
Komponen yang pertama kali dibuat adalah .html dan untuk Kode nya dapat Anda buat seperti ini:
Sementara itu untuk .css nya dapat Anda buat seperti ini:
Kenapa dibuat 3 (tiga) berbeda seperti itu? Tentunya untuk memudahkan serta memperlihatkan perbedaan yang terjadi. Berikut adalah tampilan apabila kode tersebut dijalankan:
Mudah bukan?
Jadi, pada tiap-tiap class yang disematkan di HTML Anda tuliskan style nya dalam CSS sehingga terdapat perintah untuk mengubah komponen tersebut dengan menggunakan kode seperti: color, font-family, dan font-style.
Khusus dalam perintah Font-Family sebenarnya secara kasat mata terdapat atribut Family-Name dan Generic-Family. Maka bila kita breakdown, rumus yang terdapat pada Font-Family adalah :
selector {font-family: family-name, generic-family;}
Nah, kenapa dibuat seperti itu? Alasannya adalah ketika suatu browser menampilkan konten yang berupa teks, font yang dibaca dan akhirnya ditampilkan adalah yang berada di urutan pertama dari perintah family-name. Namun, apabila ternyata font tersebut tidak ditemukan (pada Local biasanya) maka browser akan mencari font pada urutan selanjutnya ‘generic-family’.
Berikut ini adalah font yang biasa digunakan dalam standar website yang dapat dicontek:
Bagaimana tutorial dan tips kali ini? Semoga bermanfaat ya untuk Anda yang masih belajar ngoding membuat website sederhana
