CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS
CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS - Font adalah bagian dari sebuah text. walaupun font adalah bagian dari text. namun di CSS property font terpisah atau berbeda dengan property text. font adalah salah satu property penting dalam CSS yang terkait dengan tulisan/ type face-nya. sedangkan property text terkait dengan property pendukungnya. Untuk font dalam CSS memiliki beberapa property
![]() |
Property Font Styling |
HTML Yang Akan Diberi Property Font:
<!DOCTYPE html> <html> <head> <title>Font CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p> </body> </html>
Property Untuk Font Styling Pada CSS :
font-family
fungsi dari property ini buat mengatur jenis font yang digunakan, nilai / value dari property ini terdapat dua, yaitu :
- Font name : arial, times new roman, tahoma, georgia, verdana, calibri, impact, dll.
- Generic family : san-serif, serif, dll.
Font-family bisa memiliki beberapa value, seperti model gambar dibawah ini. Artinya, sistem operasi user akan mencari dan mengecek, apakah value/nama font pertama ada, bila nir terdapat, maka sistem operasinya akan mencari value kedua dan seterusnya, bila tidak ada juga, maka sistem operasi user akan mencari value menurut generic family-nya.
![]() |
Font Family |
![]() |
Perbedaan antara San-Serif dan Serif |
font-size
fungsi berdasarkan property ini buat mengatur berukuran font. Value menurut properti ini berupa angka yang mempunyai satuan. Satuan menurut properti terdapat tiga yaitu px, %, & em. Dengan property font-size pada CSS ini, menaruh fleksibiltas buat memberikan berukuran font sebanyak apapun dibanding dengan memberikan style menggunakan memakai HTML.
Font-weight
fungsi dari property ini untuk mengatur ketebalan font. property Font-weight ini memiliki beberapa value/nilai sebagai berikut :
- Lighter : value/nilai dari property ini untuk membuat font menjadi lebih kurus/ramping.
- Normal : value/nilai dari property ini untuk membuat font yang memilki default bold, seperti heading, menjadi font normal.
- 100-900 : value/nilai dari property ini membuat font menjadi lebih tebal, namun value nya direpresentasikan dari angka 100-900, semakin mendekati 900, maka font nya akan menjadi lebih tebal
- Bold : value/nilai dari property ini membuat tulisan menjadi bold/tebal. Untuk nilai bold tidak bisa diterapkan apa elemen HTML heading ( h1 – h6), karena secara default, untuk elemen tersebut memang sudah bold.
- Bolder : value/nilai dari property ini membuat tulisan lebih tebal dari default nilai bold yang ada.
Font-variant
fungsi dari property ini untuk mengatur font menjadi small-caps. Value/nilai dari Font-variant ini ada 2 jenis, yaitu
- normal : value ini membuat tulisan menjadi normal.
- small-caps : value ini akan membuat sebuah text menjadi huruf besar semua, apabila sebuah sudah menajadi huruf besar, maka huruf tersebut akan menjadi lebih besar dari sebelumnya dan tentunya lebih besar dari huruf yang lain.
![]() |
Font Variant |
font-style
fungsi dari property ini buat mengubah font sebagai bercetak miring. Value/nilai berdasarkan property ini ada tiga, yaitu :
- normal : value/nilai dari property ini membuat font yang memiliki default italic, menjadi normal.
- italic : value/nilai dari property ini membuat font menjadi miring, namun untuk proses ini, bisa dilakukan jika font yang diberi style italic, memang dalam keluarga font tersebut memilki font jenis italic.apabila punya jenis font italic, maka proses italic yang terjadi adalah mengganti font normal menjadi font italicnya, apabila tidak memiliki jenis font italic, maka yang terjadi dibuat menjadi oblique atau dipaksa miring.
- oblique : value/nilai dari property ini membuat font menjadi miring beberapa derajat kemiringan, dengan cara dipaksa oleh sistem operasi, karena font yang diberi style, dalam keluarga fontnya tidak memiliki font jenis italic.
![]() |
Font Style |
line-height
fungsi property ini untuk mengatur spasi antar baris, property line-height memilki value/nilai berupa nomor yg memilki satuan. Satuannya mampu berupa px, %, atau em.
Dibawah ini adalah penerapan font styling dalam sintak CSS buat file HTML pada atas :
h1
font-family: : impact, arial, sans-serif;
font-size: 100px;
font-family: verdana, georgia, serif;
Font-variant: small-caps; p {
font-style: italic;
Font-weight: bold; font-size: 40px;
line-height: 50px;
![]() |
Cara Memberikan CSS Font Style Pada HTML |
Shorthand/Singkatan buat CSS Font :
Untuk efisiensi penulisan pada halaman CSS, property font bisa ditulis secara singkat. Namun penulisan dari shorthand CSS font ini, harus sesuai urutan dari mulai font-style, Font-variant, Font-weight, font-size, line-height, dan urutan terakhir font-family.
![]() |
Urutan Penulisan Shorthand CSS |
![]() |
Shorthand CSS |
![]() |
Property Font Style Yang Wajib & Optional Dalam Penulisan Shorthand CSS |
Untuk pembahasan tentang property CSS font, sekian dulu. Semoga sahabat-sahabat bisa memahami dan mengerti penerangan ini, apabila terdapat yang tidak kentara, sanggup ajukan pertanyaan dikolom komentar. Tetap semangat. See you on my next articles. Bye-bye....
Referensi:
https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference- the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.
Bila terdapat pertanyaan, silakan tulis saja dikotak komentar dibawah, dari bukan spam & sinkron dengan topik
pembahasan.
Belum ada Komentar untuk "CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS"
Posting Komentar