Font-size adalah property yang digunakan untuk mengubah besar-kecilnya huruf dalam CSS. Format penulisannya sebagai berikut :
selector {
font-size: ukuran-huruf;
}
Dalam CSS tersedia banyak satuan ukuran untuk jenis text. Mulai dari value berupa kata seperti large, medium small ataupun value berupa satuan dalam persen, pt, pc, px cm mm,inch dll. Pengunaan satuan seperti cm, mm, pt dan pc lazim digunakan untuk file yang akan dicetak. Karena satuan ini berukuran 'pasti'.
Untuk CSS sendiri disarankan menggunakan persen atau pixel (px). Selengkapnya mengenai satuan satuan ini bisa di baca pada catatan terkait : Satuan Nilai Ukur pada CSS, Untuk saat ini akan dibahas khusus ukuran hurf atau font-size saja.
<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.contoh1 {
font-size: 13px;
}
.contoh2 {
font-size: 21px;
}
.contoh3 {
font-size: 9px;
}
</style>
</head>
<body>
<h2>Contoh font-size "pixel"</h2>
<h3>berikut font-size 13px:</h3>
<p class="contoh1">Huruf ini 13px.</p>
<h3>berikut font-size 21px:</h3>
<p class="contoh2">HUruf ini 21px</p>
<h3>berikut font-size 9px:</h3>
<p class="contoh3">Huruf ini 9px</p>
</body>
</html>
perlu digaris bawahi disini adalah bahwa ketika menuliska value dari properti font-size tidak boleh ada spasi antara angka dan satuan. Misalnya 9px, jangan menulis 9 px.
Perangkat Apple baru baru ini menambahkan retina displayy. Fitur ini berfungsi memapatkan ukuran pixel pada sebuah layar agdget dengan tujuan agar tampilan terlihat lebih tajam. Pada monitor biasa, terdapat 72 hingga 100 pixel/ inch. Namun dengan retina display ini kerapatan bertambah menjadi 224 px/ inchi. Dengan logikanya, ukuran 13px pada layar pereangkat Aple akan lebih kecil tampilannya dibandingkan tampilan pada layar biasa.
Namun tak perlu dikhawatirkan hal tersebut. Browser yang digunakan perangkat retina dislay telah berfungsi otomatis mengandakan ukuran font. Artinya font yang tadinya 14px otomatis akan tampil menjadi 26px pada perangkat tersebut.
<div>
<p><span> Dimanakah <i>Sultan Hasanuddin </i> Lahir?</p>
</div>
Dari kode HTML yang dicontohkan ada 4 tag elemen. div, p, span dan i. div merupakan tag paling luar. Artinya p memiliki parent element div. Dalam p ada span, jadi parent element span adalah p. Begitu selanjutnya hingga pada tag paling dalam.
Ilustrasi penggunaannya begini, jika font-size dibuat dalam persen dengan nilai value :75%. Maka ukuran huruf p adalah 75% dari huruf pada div. Begitu seterusnya hingga pada level terdalam.
<!DOCTYPE html>
<html>
<head>
<title>contoh 2 font-size css </title>
<style type="text/css">
.xsatu {
font-size: 100%;
}
.xdua {
font-size: 16px;
}
.xtiga {
font-size: 80%;
}
span {
font-size: 80%;
color: blue;
}
</style>
</head>
<body>
<h2>contoh CSS dengan font-size "persen (%)"</h2>
<div>
<p class="xsatu">font size 100%</p>
</div>
<p class="xdua">font size 16px</p>
<p class="xtiga">
<span> font size 80% ini.</span> Bedakan dengan ini yang diluar span </p>
</body>
</html>
Bisa dilihat bagaimana tampilan dari aplikasi kode CSS khusus font-size ini. Ukuran huruf default pada browser yaitu 100% adalah 16px. Kemudian pada tag span huruf ditampilkan lebih kecil 80% dari tag p. Bisa dilihat pada tampilan di huruf yang ebrwarna biru.
Peran dan kerja em ini sama persis dengan persen. Bisa dikatakan em adalah bentuk desimal dari persen. Penggunaan persen dan em dianjurkan pada website bertujuan agat tampilan website lebih responsive.
selector {
font-size: ukuran-huruf;
}
Dalam CSS tersedia banyak satuan ukuran untuk jenis text. Mulai dari value berupa kata seperti large, medium small ataupun value berupa satuan dalam persen, pt, pc, px cm mm,inch dll. Pengunaan satuan seperti cm, mm, pt dan pc lazim digunakan untuk file yang akan dicetak. Karena satuan ini berukuran 'pasti'.
Untuk CSS sendiri disarankan menggunakan persen atau pixel (px). Selengkapnya mengenai satuan satuan ini bisa di baca pada catatan terkait : Satuan Nilai Ukur pada CSS, Untuk saat ini akan dibahas khusus ukuran hurf atau font-size saja.
Font-size dalam pixel /px
Penggunaan satuan pixel intinya tidak bergantung pada pengaturan browser. Bila diberikan value 20px maka browser akan meneksekusi sebesar 20 px. Dalam web development satuan ini sering digunakan, sebab bisakonsisten bila ditampilkan dalam apapun jenis browser. Sebagai contoh bisa di jalankan kode di bawah ini.<!DOCTYPE html>
<html>
<head>
<title>ibahasapemograman</title>
<style type="text/css">
.contoh1 {
font-size: 13px;
}
.contoh2 {
font-size: 21px;
}
.contoh3 {
font-size: 9px;
}
</style>
</head>
<body>
<h2>Contoh font-size "pixel"</h2>
<h3>berikut font-size 13px:</h3>
<p class="contoh1">Huruf ini 13px.</p>
<h3>berikut font-size 21px:</h3>
<p class="contoh2">HUruf ini 21px</p>
<h3>berikut font-size 9px:</h3>
<p class="contoh3">Huruf ini 9px</p>
</body>
</html>
perlu digaris bawahi disini adalah bahwa ketika menuliska value dari properti font-size tidak boleh ada spasi antara angka dan satuan. Misalnya 9px, jangan menulis 9 px.
Perangkat Apple baru baru ini menambahkan retina displayy. Fitur ini berfungsi memapatkan ukuran pixel pada sebuah layar agdget dengan tujuan agar tampilan terlihat lebih tajam. Pada monitor biasa, terdapat 72 hingga 100 pixel/ inch. Namun dengan retina display ini kerapatan bertambah menjadi 224 px/ inchi. Dengan logikanya, ukuran 13px pada layar pereangkat Aple akan lebih kecil tampilannya dibandingkan tampilan pada layar biasa.
Namun tak perlu dikhawatirkan hal tersebut. Browser yang digunakan perangkat retina dislay telah berfungsi otomatis mengandakan ukuran font. Artinya font yang tadinya 14px otomatis akan tampil menjadi 26px pada perangkat tersebut.
Font-Size : Persen (%)
Satuan persen digunakan dalam sebuah kode CSS dikenal dengan sifat relatif. Maksudnya, font-size akan menghitungsendiri tampilannya berdasarkan parent element. Parent Element adalah tag induk dimana ada selector tersebut ada. Misalkan,<div>
<p><span> Dimanakah <i>Sultan Hasanuddin </i> Lahir?</p>
</div>
Dari kode HTML yang dicontohkan ada 4 tag elemen. div, p, span dan i. div merupakan tag paling luar. Artinya p memiliki parent element div. Dalam p ada span, jadi parent element span adalah p. Begitu selanjutnya hingga pada tag paling dalam.
Ilustrasi penggunaannya begini, jika font-size dibuat dalam persen dengan nilai value :75%. Maka ukuran huruf p adalah 75% dari huruf pada div. Begitu seterusnya hingga pada level terdalam.
<!DOCTYPE html>
<html>
<head>
<title>contoh 2 font-size css </title>
<style type="text/css">
.xsatu {
font-size: 100%;
}
.xdua {
font-size: 16px;
}
.xtiga {
font-size: 80%;
}
span {
font-size: 80%;
color: blue;
}
</style>
</head>
<body>
<h2>contoh CSS dengan font-size "persen (%)"</h2>
<div>
<p class="xsatu">font size 100%</p>
</div>
<p class="xdua">font size 16px</p>
<p class="xtiga">
<span> font size 80% ini.</span> Bedakan dengan ini yang diluar span </p>
</body>
</html>
Bisa dilihat bagaimana tampilan dari aplikasi kode CSS khusus font-size ini. Ukuran huruf default pada browser yaitu 100% adalah 16px. Kemudian pada tag span huruf ditampilkan lebih kecil 80% dari tag p. Bisa dilihat pada tampilan di huruf yang ebrwarna biru.
Satuan Ukuran Font: em
Satu em di dalam CSS setara dengan 100%, pada dasarnya Konsep parent element dari ukuran font-size secara persen hampir sama dengan em ini. Dalam penulisan em misalkan nilai 75% seharusnya ditulis kan 0,75em. Tetapi cukup ditulis .75em. Contoh lain misalkan 120% ditulis 1.2em (bilangan desimal diganti dengan titik untuk nilai berkoma).Peran dan kerja em ini sama persis dengan persen. Bisa dikatakan em adalah bentuk desimal dari persen. Penggunaan persen dan em dianjurkan pada website bertujuan agat tampilan website lebih responsive.
Share Yuk
Related Posts
Loading...
No comments:
Post a Comment