Blog Belajar Css: Properti font-size Css

Untuk mengatur ukuran font tulisan web dengan css maka gunakan properti font-size. Ukuran font sangat menentukan apakah tampilan web ramah bagi pengguna. Artikel dengan ukuran pas dimata adalah contohnya, pengunjung web merasa nyaman dengan ukuran font artikel, tidak terlalu kecil tidak pula terlalu besar.

Untuk mengatur properti font-size banyak satuan yang digunakan, salah satunya ukuran px (pixel). Ada juga dengan kata kunci nilai absolute berupa pilihan kata dalam bahasa Inggris dari yang terkecil sampai terbesar, misalnya: xx-small, x-small, small, large dan seterusnya. Lebih jelasnya dijabarkan sebagai berikut:

a. kata kunci nilai absolute. nilai: xx-small, x-small, small, medium, large, x-large, xx-large

b. lebih besar, lebih kecil. Nilai: larger, smaller
Menentukan ukuran font berdasarkan ukuran font sebelumnya, lebih besar (larger) atau lebih kecil (smaller) dari font-size awal.

c. length. Nilai: ex atau em
Ukuran nilai em dinamis. Nilai em sama dengan ukuran font yang berlaku untuk parent dari elemen yang bersangkutan. Jika Anda belum mengatur ukuran font di manapun pada halaman, maka browser secara default mengaturnya mungkin 16px. Akhirnya 1em = 16px, dan 2em = 32px. Jika Anda menetapkan font-size 20px pada elemen body, maka 1em = 20px dan 2em = 40px.

Rumus: em = nilai elemen pixel diinginkan / elemen parent font-size dalam pixel

Misalnya, font-size body halaman diberi 1em, dengan standar browser 1em = 16px; jika font-size yang Anda inginkan adalah 12px, maka nilainya 0.75em (12/16 = 0,75). Demikian pula, jika Anda ingin ukuran font 10px, kemudian tentukan 0.625em (10/16 = 0,625); untuk 22px, menjadi 1.375em (22/16 = 1,375em).

d. persentase. Nilai: %
Membesarkan ukuran font dari sebelumnya, 1 kali pembesaran sama dengan 100%. Misalnya ukuran font h1 diberpesar 3 kali, maka setara dengan 300%.

e. pixel. Nilai: px
Pilihan yang baik ketika Anda membutuhkan akurasi pixel, meskipun hasilnya mungkin sedikit berbeda di masing-masing browser.

Contoh dibuat satu per satu:

absolute.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai absolute</title>
            <style type="text/css">
                p.xxsmall{font-size: xx-small;}
                p.medium{font-size: medium;}
                p.large{font-size: large;}
            </style>
        </head>
    <body>
        <p class="xxsmall">Ini font ukuran xx-small.</p>
        <p class="medium">Ini font ukuran sedang (medium).</p>
        <p class="large">Ini font ukuran large.</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan kata kunci nilai absolute.

l_besar_keci.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai larger-smaller</title>
            <style type="text/css">
                /*nilai awal medium*/
                p.medium{font-size: medium;}
                /*diperbesar*/
                p.larger{font-size: larger;}
                /*diperkecil*/
                p.smaller{font-size: smaller;}
            </style>
        </head>
    <body>
        <p class="medium">Ini font ukuran sedang (medium).</p>
        <p class="larger">Diperbesar dengan larger.</p>
        <p class="smaller">Diperkecil dengan smaller (dari ukuran awal: medium).</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan larger-smaller.

em.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai em</title>
            <style type="text/css">
                /*atur elemen body 1em=16px */
                body{font-size: 1em;}
                /*ukuran 12 px setara 0.75em */
                p.ukuran12{font-size: 0.75em;}
                /*ukuran 22 px setara 1.375em */
                p.ukuran22{font-size: 1.375em;}
            </style>
        </head>
    <body>
        <p>Ini ukuran font elemen body (secara umum).</p>
        <p class="ukuran12">Ini font setara 12px (0.75em).</p>
        <p class="ukuran22">Ini font setara 22px (1.375em).</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai em.

persentase.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai persentase</title>
            <style type="text/css">
                /*ukuran h1 diperbesar 3 kali*/
                h1{font-size: 300%;}
            </style>
        </head>
    <body>
        <h1>Ini ukuran h1 diperbesar 300% (3 kali lipat), 100%=1 kali lipat.</h1>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai persentase (%).

px.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Font-size nilai pixel (px)</title>
            <style type="text/css">
                p.ukuran12{font-size:12px;}
                p.ukuran22{font-size:22px;}
                p.ukuran30{font-size:30px;}
            </style>
        </head>
    <body>
        <p class="ukuran12">Ini ukuran font 12 px.</p>
        <p class="ukuran32">Ini ukuran font 22 px.</p>
        <p class="ukuran30">Ini ukuran font 30 px.</p>
    </body>
    </form>
</html>

Tampilan:

Tampilan nilai px.

Referensi tulisan:

font-size - CSS; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 25 Februari 2015.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.

Rabu, 25 Februari 2015

Properti font-size Css

Tidak ada komentar:

Posting Komentar