Belajar CSS

Belajar Styling Font Dalam CSS

Belajar Styling Font Dalam CSS
Written by pintasku

Pada kesempatan kali ini Blog Pintasku masih membahas seputar Tutorial Belajar CSS, sebelumnya saya menjelaskan mengenai Belajar Styling Text Dalam CSS, nahh untuk kali ini kita akan melanjutkan Tutorial Belajar Styling Font Dalam CSS.

 Belajar Styling Font Dalam CSS

Oke pada artikel kali ini kita akan membahas seputar Styling FONT di dalam CSS, topik yang akan kita pelajari kali ini, antara lain.

  1. Mengganti Jenis Font Dalam CSS
  2. Mengenal Font Style Dalam CSS
  3. Mengatur Ukuran Font Dalam CSS
  4. Mengatur Ketebalan Huruf Dalam CSS
  5. Mengenal Property Font Variant Dalam CSS

Sebelum kita masuk kedalam pembahasan utama kita akan mengenali terlebih dahulu Jenis – Jenis Font Standar Dalam CSS. Jika sudah mengenal silahkan di baca tutorialnya dibawah ini.

1. Mengganti Jenis Font Dalam CSS

Untuk mengganti atau mengubah jenis font yang digunakan di dalam HTML itu kita bisa menggunakan property CSS : font-family. berikut ini adalah contoh penggunaannya.

2. Mengenal Font Style Dalam CSS

Maksud dari Font Style disini adalah untuk membuat tulisan menjadi miring (italic) dan tulisan condong, condong disini bukan seperti italic. Nahh untuk Property yang digunakan adalah property CSS : font-style, sedangkan untuk value “nilai” dari property tersebut ada 3 macam, yaitu :
  1. normal : Membuat tulisan menjadi normal
  2. italic : Membuat tulisan menjadi miring
  3. oblique : Membuat tulisan menjadi condong, condong disini berbeda dengan miring.
Supaya lebih mengerti silahkan perhatikan contoh penggunaan Property CSS : font-style ini di dalam HTML.

3. Mengatur Ukuran Font Dalam CSS (Font-size)

Nahh sedangkan untuk Mengatur ukuran font dalam CSS itu menggunakan Property CSS : font-size. berikut adalah contoh kode CSSnya.

Pada contoh kode di atas terlihat bahwa saya menggunakan value “14px”.

Di dalam CSS satuan untuk mengatur ukuran text itu ada 3 macam, yaitu :

1. Menggunakan satuan pixel

Penggunaan satuan pixel ini memang sangatlah sering digunakan karena satuan pixel ini lebih spesifik dalam hal menampilkan jika kita menerapkan satuan pixel maka jika dibuka hasilnya akan 14px

2. Menggunakan satuan em

Penggunaan satuan em ini sangat disarankan oleh para web desainer dari pada menggunakan satuan pixel, ukuran 1 em itu sama dengan ukuran 16px di dalam pixel dan 100% jika di dalam satuan persen. 

3. Menggunakan satuan persen

Satuan persen merupakan satuan yang bersifat relatif, karena perhitungan satuan persen itu berdasarkan ukuran font dari settingan tag induk (parent element). 

4. Mengatur Ketebalan Huruf Dalam CSS

Jika di dalam HTML kita mengetahui untuk mengatur ketebalan sebuah huruf, itu menggunakan tag <b> dan <strong> nahh jika di dalam CSS kita menggunakan property font-weight. Berikut ini adalah contoh penggunaan property font-weight di dalam CSS.

5. Mengenal Property Font Variant Dalam CSS

Property Font-variant ini memiliki fungsi sama halnya dengan property text-transform, yaitu untuk membuat huruf menjadi besar semuanya atau lebih sederhananya mengubah tulisan menjadi tulisan kapital. Jika pada property text-transform itu bisa diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Sedangkan di property font-variant hanya bisa diisi dengan 2 nilai saja, yaitu : small-caps dan normal.
Nilai small-caps pada property font-variant ini akan memberikan kesan ‘old-school’ pada tulisan, karena nilai ini membuat tulisan menjadi sedikit lebih kecil, tapi dengan huruf besar semua.
Berikut ini adalah contoh penggunaan property font-variant dalam CSS.

Nahh cukup sekian Tutorial Belajar CSS mengenai Styling Font, semoga tutorial ini bisa bermanfaat untuk semuanya. Terimakasih

Tentang Penulis

pintasku

Pintasku was established since 2015. Starting from a personal blog and now turned into a group of web developers. Pintasku provides web development, hosting, and domain register services