Modul Praktikum CSS – Cara Cerdas Belajar CSS

FONT
1. Menentukan Jenis Font
Jenis font diatur melalui properti font-family. Nilainya berupa sekelompok nama font dengan
pemisah berupa koma
Contoh :
font-family : verdana, arial, helvetica, sans-serif ;
Pada contoh seperti itu, verdana merupakan font yang menjadi prioritas untuk dipakai. Namun, bila
font tersebut tidak terdapat pada klient maka Arial yang akan digunakan, dan seterusnya.
2. Menentukan Ukuran Font
Ukuran font diatur melalui properti font-size
Contoh :
Font-size : 12px ;
Pada contoh diatas, ukuran font sebesar 12 piksel
Contoh :
Ukuran.css
.ukuran12
{ font-size : 12px ; }
.ukuran18
{ font-size : 18px ; }
.ukuran36
{ font-size : 36px ; }

Ukuran.html

Ukuran Font



Teks Ukuran 12
Teks Ukuran 18
Teks Ukuran 36



3. Satuan Ukuran Font
Satuan
pt
pc
px
em
ex

%

Keterangan
Dari kata “point” atau titik, 1 pt = 1/72 inci
Dari kata “pica”, 1 pc = 12 titik
Dari kata “pixel”, 1 px sama sebuah titik pada layar komputer
Berasal dari huruf M. Ukuran bersifat relatif terhadap ukuran font sekarang, 1
em identik dengan ukuran font sekarang, 2 em berarti 2 x ukuran font
sekarang. Nilai pada em bisa berupa bilangan real.
Berasal dari huruf x kecil, 1 ex sama dengan tinggi huruf x pada font sekarang,
kira-kira tinggi x adalah setengah tinggi font
Persentase, bersifat relatif terhadap ukuran font sekarang

in
mm
cm

Menyatakan satuan inci
Menyatakan satuan milimeter
Menyatakan sauan sentimeter

4. Alternatif lain Menentukan Ukuran Font
CSS menyediakan 7 konstanta yang bisa digunakan untuk menentukan ukuran font. Ketujuh
konstanta tersebut adalah xx-small, x-small, small, medium, large, x-large, xx-large. Konstanta
medium menyatakan ukuran normal
Contoh :
konsfont.css
.px12 { font-size : 12 px; }
.px18 { font-size : 18 px; }
.medium { font-size : medium ; }
.small { font-size : small ; }
.x-small { font-size : x-small ; }
.xx-small { font-size : xx-small ; }
.large { font-size : large ; }
.x-large { font-size : x-large ; }
.xx-large { font-size : xx-large ; }

konsfont.html

Ukuran Font




Ukuran 12px
xx-large
x-large
large
medium
small
x-small
xx-small


Ukuran 18px
xx-large
x-large
large
medium

small
x-small
xx-small