Belajar Merubah Font dengan CSS

Pada tutorial kali ini kita akan belajar cara untuk merubah font dengan CSS. Font adalah ilmu yang berkaitan dengan pemakaian Huruf atau Tulisan yang digunakan. Pada CSS pembahasan Font tidak hanya berkaitan dengan jenis Font yang digunakan sebagai tulisan dalam halaman Website. Namun juga berkaitan dengan Style Font (italic / bold), Warna Font, dan juga Ukuran Font.

Pada materi ini kita akan membahas tentang cara merubah font (Font Family), cara merubah ukuran font (Font Size), memberi style pada font (Font Style), Font Variant, dan juga Font Weight.

Font

Property ini dapat digunakan jika ingin memasukan semua property font dalam 1 deklarasi, bisa dianggap tag <font> ini adalah jalan pintas atau sering disebut juga sebagai shorthand. Jadi anda dapat memasukan style, variant, weight, family, dan size hanya dalam 1 deklarasi.

Property font-size dan font-family sangat diperlukan dalam pendeklarasiannya. Jika salah satu nilai terlewatkan, maka akan kembali ke nilai default.

Di bawah ini adalah contoh kode sumbernya :

Di bawah ini adalah hasil dari kode sumber di atas :

Belajar Merubah Font dengan CSS

Cara merubah font ( Font Family )

Digunakan untuk memilih jenis – jenis family font yang di inginkan, seperti cursive, fantasy, serif, sans-serif, dan monospace. Sebaiknya saat anda membuat website jangan hanya memasukan 1 jenis font, karena bisa jadi 1 jenis font yang kalian pilih tidak ada pada browser / sistem operasi lain, jadi masukan 2 / 3 / lebih jenis font. Nilai dari tiap jenis font yang dimasukan, dipisahkan dengan tanda koma.

Ada 2 cara untuk memilih :

  1. Melalui nama family font (font family)

Cara pemilihannya seperti contoh di atas, menyebutkan nama font yang di inginkan seperti Arial, Times New Roman, Courier New, Calibri, Algerian, dan masih banyak lagi.

  1. Melalui nama family umumnya (generic – family)

Memilih kategori dari font-family yang ada untuk digunakan. Yang termasuk generic font family adalah…

Generic Font Family Font Family

Serif

Georgia, serif
‘Palatino Linotype’, ‘Book Antiqua’, Palatino, Serif
‘Time New Roman’, Serif

Sans – Serif

Arial, Helvetica, Sans – Serif
Arial Black. Gadget, Sans – Serif
‘Comic Sans MS’, Cursive, Sans – Serif
Impact, Charcoal, Sans – Serif
‘Lucida Sans Unicode’, Lucida Grande’, Sans – Serif
Tahoma, Geneva, Sans – Serif
‘Trebuchet MS’, Helvetica, Sans – Serif
Verdana, Geneva, Sans – Serif

Monospace

‘Courier New’, Courier, Monospace
‘Lucida Console’, Monaco, Monospace

Font Size

Digunakan untuk menentukan satuan ukuran font yang diinginkan. Terdapat berbagai jenis satuan ukuran yang dapat dipakai.

% pt
px em
cm xx-small
x-small smaller
small medium
large larger
x-large xx-large

Di bawah ini contoh kode sumbernya…

Dan di bawah ini adalah hasil dari kode sumber di atas :

merubah ukuran font pada css

Font Style

Property font-style digunakan untuk merubah teks menjadi italic/oblique, yakni merubah tulisan menjadi miring.

Nilai property Keterangan
Normal Style font ditampilkan dalam keadaan normal (umum).
Italic Style font ditampilkan dalam keadaan miring italic.
Oblique Style font ditampilkan dalam keadaan miring oblique.
Initial Style font ditampilkan dalam keadaan default
Inherit Font ditampilkan dari penurunan elemen parent.

Dan di bawah ini adalah contoh dari kode sumber di atas :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Font Style pada CSS

Font Variant

Properti font-variant digunakan untuk menyeting bentuk font yang akan ditampilkan apakah akan ditampilkan sebagai huruf besar/huruf kecil. Nilai properti yang ada di dalamnya adalah :

Nilai Properti Keterangan
Normal Font yang ditampilkan adalah Normal.
Small-caps Font yang ditampilkan adalah small-caps (biasa disebut huruf Kapital).
Initial Font yang ditampilkan sesuai dengan nilai defaultnya.
Inherit Font yang ditampilkan sesuai dengan nilai parentnya.

Di bawah ini adalah contoh dari kode sumber di atas :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Font Variant pada CSS

Font Weight

Properti font-weight digunakan untuk mengatur ketebalan huruf. Dalam pemberian nilai propertinya, dapat kalian gunakan angka 100/200/300 s/d 900. Namun, ketika penulis mengujinya penulis mendapatkan saat nilai 100 – 500 tulisan masih normal, namun ketika >=600 tulisan sudah menjadi tebal.

Dan di bawah ini adalah hasil dari kode sumber di atas :

Font Weight pada CSS


Demikian tutorial dari Belajar Merubah Font dengan CSS, silahkan kunjungi tutorial CSS lainnya seperti mengatur posisi elemen pada CSS, fungsi property display pada CSS.

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Belajar Merubah Font dengan CSS”

× Contact Us