Belajar css Format Font

css: font styling

CSS memberi gaya pada font/huruf. Dengan css style, huruf atau font diformat ke dalam berbagai bentuk, warna, ukuran dan lain-lain, seperti yang akan diuraikan bagaimana memformat font dengan css, yang meliputi:

• font-family.
• color
• font-size
• font-style
• font-variant
• font-weight

Jenis huruf.

Dalam memilih bentuk font css, ada dua jenis nama keluarga font:

- keluarga generik: kelompok keluarga font dengan tampilan yang sama (seperti : "serif" atau "monospace")

- fon: keluarga font tertentu (seperti: "times new roman" atau "arial")

keluarga generik	font family	penjelasan
serif	times new roman georgia	serif font memiliki garis kecil di ujung pada beberapa karakter.
sans-serif	arial verdana	"sans" berarti tidak : font ini tidak memiliki garis diujung karakter
monospace	courier new lucida console	semua karakter monospace memiliki lebar yang sama

Untuk memilih keluarga font dalam memformat font/teks digunakan properti Font-family. Properti font-family harus diikuti dengan beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia akan memilih font berikutnya yang didukung.

Mulailah dengan nama font yang anda inginkan, dan diakhiri dengan keluarga generik agar browser memilih font yang sama dalam keluarga generik jika tidak ada font lain yang tersedia.

Jika nama font yang dipilih lebih dari satu kata maka dalam menulis nama font harus berada dalam tanda kutif, Seperti "Times New Roman". Dan jika memilih lebih dari satu nama harus dipisahkan dengan tanda koma.

body { font-family: "Times New Roman", Times, Serif; }

p { font-family: "Trebuchet MS", Arial; }

Warna huruf.

Untuk menentukan warna huruf digunakan properti color dengan nilai/value yang dapat dipilih dengan: nama warna, kode hexadecimal, atau nilai rgb.

Contoh.

body { color: aquamarine; }

h1 { color: #0000FF; }

Ukuran huruf.

Untuk menentukan ukuran huruf digunakan properti font-size. Sedangkan nilai/value dari properti tersebut adalah: small, medium, large, px; % dan lainnya.

Contoh

body { font-size: 12px ; }

h1 { font-size: larger; }

p { font-size: medium; }

Tampilan pada halaman web.

Judul ukuran larger

paragraf ini berukuran 12px

sedangkan paragraf ini berukuran medium

Gaya huruf/style.

Untuk menentukan gaya/style huruf digunakan properti: font-style, dengan memilih nilai: normal, italic, oblique.

Contoh.

p { font-style: italic; }

Tampilan pada halaman web.

tulisan pada paragraf ini bergaya miring (italic).

sedangkan tulisan ini bergaris bawah.

Font variant.

Properti font-variant digunakan untuk mengatur teks agar bergaya small caps atau tidak. Atribut ini dengan memilih value: small-caps maka teks yang tadinya berhuruf kecil berubah menjadi huruf capital semua.

Contoh

p { font-variant: small-caps; }

Tampilan pada halaman web.

paragraf ini bergaya small-caps, asalnya semua berhuruf kecil.

Huruf tebal.

Untuk membuat huruf tebal, digunakan properti font-weight dengan nilai/value yaitu: normal, bold, bolder atau lighter.

Contoh.

h1 { font-weight: bolder; }

p { font-weight: lighter; }

Tampilan pada halaman web.

ini heading

teks pada paragraf ini bergaya lighter.

Itulah, bagaimana css mengatur variasi gaya pada huruf atau teks.

Sumber materi: W3Schools.

Baca juga:

• Belajar html Background Styling.
• Cara Membuat Gambar Transparan.
• Cara Mengubah Grid Menu Pada Symbian S60v3v5.
• Belajar HTML Cara Membuat Teks/Obyek Berjalan.
• Belajar html Hyperlink.

back to top