6 Property CSS Untuk Mengatur Font yang digunakan Pada Teks HTML

CSS telah menyediakan properti khusus yang difungsikan untuk menentukan jenis font yang digunakan pada teks HTML. Anda juga bisa mengatur font tersebut seperti mengatur ketebalan font, jenis font yang dipakai, ukuran font, gaya font, dsb.

Daftar isi

1. Font-Style

property font-style merupakan property CSS yang digunakan untuk memberi gaya penulisan teks pada suatu elemen atau selector. Properti ini paling sering digunakan untuk membuat teks menjadi miring(italic). Berikut ini 3 value atau nilai dari property font-style :

Daftar Tabel untuk Font-Style
NoValueDeskripsi
1italicmembuat teks menjadi miring
2normalmenampilkan teks dengan gaya normal
3obliquemembuat teks menjadi lebih miring dari 'italic'

dari ketiga nilai diatas, 'italic' adalah nilai yang sering digunakan. Anda juga bisa menggunakan 'oblique' untuk membuat teks miring. sedangkan nilai 'normal' jarang digunakan, karena secara default suatu teks akan normal tanpa menggunakan properti font-style.

Kapan saat yang tepat untuk menggunakan font-style dengan nilai 'normal' jika nilai tersebut jarang digunakan?. Jika dalam suatu paragraf yang berisi kalimat yang panjang diatur dengan style miring/italic, dan ditengah-tengah kalimat Anda ingin membuat beberapa teks terlihat normal, maka saat itulah yang tepat untuk menggunakan nilai 'normal'. dibawah ini adalah contoh penggunaan properti font-style dengan ketiga Nilainya yang bisa Anda coba sebagai referensi untuk membuat gaya tulisan menjadi miring atau tidak.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font-style </title>
        <style>
            .italic{
                font-style: italic;
            }
            .oblique{
                font-style: oblique;
            }
            .normal{
                font-style: normal;
            }
        </style>
    </head>
    
    <body>
        <p class="italic"> ini adalah kalimat yang diatur dengan nilai 'italic'. </p>
        <p class="oblique"> ini adalah kalimat yang diatur dengan nilai 'oblique'. </p>
        <p class="normal"> ini adalah kalimat yang diatur dengan nilai 'normal'. </p>
    </body>
    
</html>

Berikut Screenshot hasil dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh hasil penggunaan dari kode css font-style
Gambar 1

2. Font-Size

font-size merupakan property CSS yang digunakan untuk menentukan ukuran font yang digunakan pada teks. Artinya, Anda bisa merubah ukuran Teks pada Html yang nantinya akan ditampilkan pada Halaman Web.

Untuk merubah ukuran font yang digunakan pada teks, Anda bisa memilih salah satu dari Value yang tersedia untuk properti font-size. berikut ini Value untuk properti font-size :

Daftar Tabel untuk Font-Size
NoValueValue
1x-smallx-large
2smalllarge
3xx-smallxx-large
4smallerlarger
5mediuminitial
6..px, ..em, dll..%

dari 12 nilai dalam tabel diatas, Anda bisa menggunakannya untuk mengatur ukuran font. Saya sendiri lebih sering menggunakan nilai dalam bentuk ukuran seperi px, em, cm, mm, dsb, karena penggunaannya bisa diatur sesuai keinginan. berikut contoh Kode-nya :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font-size </title>
        <style>
            .smaller{
                font-size: smaller;
            }
            .larger{
                font-size: larger;
            }
            .px{
                font-size: 25px;
            }
        </style>
    </head>
    
    <body>
        <p class="smaller"> Ukuran Font ini diatur dengan nilai 'smaller'. </p>
        <p class="larger"> Ukuran Font ini diatur dengan nilai 'larger'. </p>
        <p class="px"> Ukuran Font ini diatur dengan nilai '25px'. </p>
    </body>
    
</html>

dan berikut ini adalah Screenshot hasil dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh hasil penggunaan dari kode css font-size
Gambar 2

3. Font-Family

font-family merupakan properti yang digunakan untuk menentukan dan merubah jenis font yang digunakan pada teks. Menurut saya, properti ini digunakan hampir diseluruh element HTML, mulai dari judul, menu, heading, paragraf, dsb. Saya sendiri juga menggunakan properti ini disetiap element HTML.

Value atau Nilai dari property font-family adalah nama font dari jenis font yang ingin digunakan. Di CSS, ada 5 jenis font standar yaitu font serif, sans-serif, monospace, cursive, dan fantasy. disetiap jenis font tersebut terdapat puluhan nama font yang bisa digunakan sebagai value dari property font-family. Misalnya : Times New Roman, Arial, Courier New, Comic Sans, dsb.

dibawah ini adalah contoh menggunaan properti font-family untuk membuat teks pada Html menjadi berbeda dari font normalnya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font-family </title>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Marck+Script');
            .import{
                font-family: 'Marck Script', cursive;
                font-size: 25px;
            }
            .local{
                font-family: 'arial', sans-serif;
            }
        </style>
    </head>
    
    <body>
        <p class="import">
            isi dari paragraf ini adalah kalimat yang akan ditampilkan pada halaman web dengan nama font 
            'Marck Script' dari jenis font 'Cursive'. jenis font tersebut tersedia secara online dari GOOGLE.
        </p>
        <p class="local">
            isi dari paragraf ini adalah kalimat yang ditulis dan ditampilkan pada halaman web dengan nama font 
            'Arial' dari jeni font 'sans-serif'. jenis font tersebut biasanya sudah tersedia disetiap perangkat device.
        </p>
    </body>
    
</html>

Berikut Screenshot hasil dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh hasil penggunaan dari kode css font-family
Gambar 3

Catatan : setiap font dari jenis font memiliki ukuran yang berbeda-beda, maka pilihlah jenis font yang sesuai agar tampilan pada halaman web tidak terlihat aneh, atau bahkan akan sulit untuk dibaca.

4. Font-Weight

font-weight merupakan property CSS yang digunakan untuk menentukan ketebalan dari font yang digunakan pada teks. Anda bisa menggunakan properti ini membuat teks tebal atau dikenal dengan istilah Bold. Sedangkan Value atau Nilai dari font-weight ada beberapa macam. berikut nilai tersebut :

Daftar Tabel untuk Font-Weight
NoValueDeskripsi
1boldmembuat font pada teks/karakter menjadi tebal
2boldermembuat font pada teks/karakter menjadi lebih tebal
3lightermembuat font pada teks/karakter menjadi lebih tipis
4normalmembuat font pada teks/karakter menjadi normal
5initialmengatur value dari properti menjadi default
6100,200,....,900mengatur ketebalan font pada teks/karakter berdasarkan ukuran nilai yang dipilih

dibawah ini adalah contoh penggunaan dari properti font-weight dengan nilai 900, bold, normal, lighter. untuk mengatur ketebalan font pada teks :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font-weight </title>
        <style>
            h1{
                font-weight: 900;
            }
            h2{
                font-weight: bold;
            }
            h3{
                font-weight: normal;
            }
            h4{
                font-weight: lighter;
            }
        </style>
    </head>
    
    <body>
        <h1> ketebalan diatur dengan nilai '900' </h1>
        <h2> ketebalan diatur dengan nilai 'bold' </h2>
        <h3> ketebalan diatur dengan nilai 'normal' </h3>
        <h4> ketebalan diatur dengan nilai 'lighter' </h4>
    </body>
    
</html>

Berikut Hasil Screenshot dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh hasil penggunaan dari kode css font-weight
Gambar 4

5. Font-Variant

font-variant merupakan property CSS yang digunakan untuk menentukan apakah suatu teks harus ditampilkan dalam huruf kecil atau tidak. Nilai dari font-variant yaitu : normal, small-caps, initial. Efek dari nilai 'small-caps' akan membuat teks yang tadinya hurufnya kecil menjadi besar/huruf Kapital. Berikut contoh Kodenya :

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font-variant </title>
        <style>
            .normal{
                font-variant: normal;
                font-family: 'arial', sans-serif;
            }
            .small-caps{
                font-variant: small-caps;
                font-family: 'arial', sans-serif;
            }
        </style>
    </head>
    
    <body>
        <p class="normal"> kalimat ini menggunakan nilai 'normal' </p>
        <p class="small-caps"> kalimat ini menggunakan nilai 'small-caps' </p>
    </body>
    
</html>

Berikut Screenshot hasil dari contoh kode diatas jika ditampilkan pada halaman web browser :

contoh hasil penggunaan dari kode css font-variant
Gambar 5

6. Font

Property font merupakan property CSS yang digunakan untuk mempersingkat penulisan property font lainnya. Artinya, properti tersebut memiliki value yang berisi dari 5 properti font yaitu : font-style, font-variant, font-weight, font-size, dan font-family.

Penulisan sintaks CSS untuk properi font tidak harus berisi 5 nilai properti tersebut, Anda bisa mempersingkat lagi misalkan tanpa mengisi nilai 'font-variant'. atau Anda bisa menulis hanya 2 nilai saja misalnya nilai 'font-size' dan 'font-family'. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh font </title>
        <style>
            .dua-nilai{
                font: 10px/10px arial, sans-serif;
            }
            .empat-nilai{
                font: italic bolder 15px/20px arial, sans-serif;
            }
            .lima-nilai{
                font: italic small-caps bold 20px/30px arial, sans-serif;
            }
        </style>
    </head>
    
    <body>
        <p class="dua-nilai"> paragraf ini berisi dua nilai yaitu 'font-size/line-height dan font-family' </p>
        <p class="empat-nilai"> berisi 4 nilai yaitu 'font-style, font-weight, font-size/line-height, dan font-family' </p>
        <p class="lima-nilai"> berisi 5 nilai yaitu 'font-style, font-variant, font-weight, font-size/line-height, font-family' </p>
    </body>
    
</html>

dan dibawah ini adalah hasil screenshot dari contoh kode diatas jika dtampilkan pada halaman web :

contoh hasil penggunaan dari kode css font
Gambar 6