Styling Font CSS
Selamat bertemu lagi, kali ini kita akan belajar tentang font pada CSS.
Properti font digunakan untuk mendefinisikan keluarga font (font family), bold, style, dan size. Pada CSS properti yang digunakan untuk mengatur font meliputi
1. font
2. font-family
3. font-size
4. font-style
5. font-variant
6. font-weight
1. Font
Digunakan untuk menempatkan semua properti pada satu deklarasi. Di dalamnya terdapat value dari properti font-family, font size, font-style, font-variant, font-weight.
ex.
<!DOCTYPE html>
<html>
<head>
<title>properti font</title>
<style type="text/css">
p {
font: italic bold 15px georgia, serif;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
untuk penjelasanya akan kami paparkan dibawah di setiap properti
2. Font Family (font-family)
Diskripsi : Digunakan untuk menentukan keluarga dari font. Properti font-family dapat menampung beberapa nama font untuk sistem fallback, artinya jika browser tidak mendukung font pertama, maka akan membaca font selanjutnya. Kita bisa menyebut dengan font cadangan.
Jenis :
a. family name
b. generic family
Value : family-name,generic-family, initial, inherit
a. family name
Diskripsi : nama dari kumpulan font yang sejenis, contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic. Family name dari contoh tersebut adalah Trebuchet MS
beberapa family name yang sering digunakan dan hampir semua dapat di baca oleh browser yaitu:
Georgia
Palatino Linotype
Book Antiqua
Times New Roman
Arial
Helvetica
Arial Black
Impact
Lucida Sans Unicode
Tahoma
Verdana
Courier New
Lucida Console
initial
b. generic family
Diskripsi : font standar yang kemungkinan besar sudah tersedia di setiap browser.
Jenis : serif, sans-serif, cursive, fantasy, dan monospace.
contoh kode properti font-family
p {
font-family: "Times New Roman", Times, serif;
}
contoh diatas, kita tulis 2 family name yaitu Times New Roman dan Times dan satu generic family yaitu serif. Pada family name Times New Roman di apit oleh tanda kutip karena aturan penulisan jika family name mempunyai lebih dari 2 kata maka harus diapit oleh tanda kutip.
Contoh tadi browser akan mencari font jenis Times New Roman, jika tidak ditemukan, maka browser akan mencari font jenis kedua yaitu Times, jika browser masih tidak menemukan, maka akan menggunakan font standar yaitu serif.h
Diatas hanya satu contoh penulisan properti font-family. Dalam dunia web, terdapat kombinasi yang umum digunakan dan kemungkinan besar semua browser mendukung, berikut daftar kombinasi
Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, 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
“Courier New”, Courier, monospace
“Lucida Console”, Monaco, monospace
ex property font-family
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">kalimat ini menggunakan font Times New Roman.</p>
<p class="sansserif">kalimat ini menggunakan font Arial</p>
</body>
</html>
3. Font-size
Diskripsi : Digunakan untuk mengatur ukuran font.
Value : xx-large, x-large, large, medium, small, x-small, xx-small, smaller, larger, length(cm,pt,em,px,etc), %, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<title>properti font size</title>
<style type="text/css">
p.xxlarge {
font-size: xx-large;
}
p.xlarge {
font-size: x-large;
}
p.large {
font-size: large;
}
p.medium {
font-size: medium;
}
p.small {
font-size: small;
}
p.xsmall {
font-size: x-small;
}
p.xxsmall {
font-size: xx-small;
}
p.smaller {
font-size: smaller;
}
p.larger {
font-size: larger;
}
p.px {
font-size: 24px;
}
p.em {
font-size: 1em;
}
</style>
</head>
<body>
<p class="xxlarge">kalimat ini menggunakan value xx-large</p>
<p class="xlarge">kalimat ini menggunakan value x-large</p>
<p class="large">kalimat ini menggunakan value large</p>
<p class="medium">kalimat ini menggunakan value medium</p>
<p class="small">kalimat ini menggunakan value small</p>
<p class="xsmall">kalimat ini menggunakan value x-small</p>
<p class="xxsmall">kalimat ini menggunakan value xx-small</p>
<p class="smaller">kalimat ini menggunakan value smaller</p>
<p class="larger">kalimat ini menggunakan value larger</p>
<p class="px">kalimat ini menggunakan value px length</p>
<p class="em">kalimat ini menggunakan value em length</p>
</body>
</html>
penggunaan font-size kebanyakan para pengembang menggunakan value ’em’ karena direkomendasikan oleh W3C. ukuran 1 em adalah 16 px
4. Font-style
Diskripsi : digunakan untuk mengatur style atau gaya font.
value : normal, italic, oblique, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<title>properti font-style</title>
<style type="text/css">
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="italic">ini contoh kalimat menggunakan value italic</p>
<p class="oblique">ini contoh kalimat menggunakan value oblique</p>
</body>
</html>
5. Font-variant
Diskripsi : Digunakan untuk mengkonversi huruf kecil menjadi huruf besar. Tapi Huruf besar tersebut lebih kecil dari huruf yang murni kita tulis huruf besar.
Value : normal, small-caps, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<title>properti font-variant</title>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">My name is CSS.</p>
<p class="small">My name is Hege CSS.</p>
</body>
</html>
6. Font-weight
Diskripsi : Digunakan untuk menentukan tebal atau tipis pada font
Value : normal, bold, bolder, lighter, 100, 200, sampai 900, initial, inherit
ex.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Semoga bermanfaat, sampai jumpa di postingan selanjutnya.
Written by @akhi_syabab
Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency