Cara merubah font di php

Pada tutorial sebelumnya, kita sudah belajar gimana cara mengatur teks dengan CSS seperti mengatur alignment, spacing, transform, dan sebagainya.

Kali ini kita akan membahas tentang properti font- yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.

Ada beberapa properti yang akan kita bahas:

• font-size untuk mengatur ukuran font;
• font-weight untuk mengatur ketebalan font;
• font-style untuk mengatur gaya font;
• font-family untuk mengatur jenis font;

Mari kita mulai..

Mengatur Ukuran Font

Untuk mengatur ukuran font, kita bisa menggunakan properti font-size. Properti ini dapat kita beri nilai dengan satuan px [piksel], % [persentase], em, rem, dan lain-lain.

Contoh:

Artinya:

Kita akan mengatur ukuran font untuk semua elemen

sebesar 18px.

Secara default ukuran font untuk elemen

adalah 16px. Ini bisa kita ubah sesuai selera.

Selain menggunakan angka, ada juga nilai bawaan yang sudah tersedia seperti:

• normal untuk ukuran normal [16px];
• small untuk ukuran kecil;
• large untuk ukuran besar;
• x-large untuk ekstra besar;
• xx-large untuk ekstra-ekstra besar;
• x-small untuk teks yang lebih kecil dari small;
• xx-small untuk teks yang dua kali lebih kecil dari small;

Biar lebih jelas, mari kita coba latihan.

Buatlah file HTML baru dengan nama font-size.html, kemudian isi dengan kode berikut:

  
  
  
  Contoh Font Size
  
    h2 {
      font-size: 24px;
      color: slateblue;
    }
    .font-big {
      font-size: x-large;
    }

    .font-small {
      font-size: small;
    }
  


  Contoh Font Size
  Ini adalah paragraf dengan ukuran font besar
  Ini adalah paragraf dengan ukuran font normal
  Ini adalah paragraf dengan ukuran font kecil

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada contoh ini, kita mengatur ukuran font untuk elemen

adalah 24px.Kamu bisa lihat sendiri hasilnya.

Lalu ukuran font pada paragraf pertama adalah large yang artinya lebih besar dari ukuran normal [16px].

Kemudian pada paragraf kedua, kita tidak mengatur ukuran font-nya. Sehingga akan menggunakan ukuran normal, yakni 16px.

Kemudian paragraf terakhir kita beri ukuran font-nya dengan small.

Sangat mudah bukan.

Silahkan coba eksperimen di inspect elemen, ubahlah ukuran font-nya dari sana.

Mengatur Ketebalan Font

Untuk mengatur ketebalan font, kita bisa menggunakan properti font-weight. Properti ini dapat kita berikan nilai berupa angka ukuran ketebalan atau nilai konstan yang sudah ada.

Contoh nilai-nilai yang valid:

• lighter untuk ketebalan yang tipis;
• normal untuk ketebalan normal;
• bold untuk membuat font lebih tabal;
• bolder untuk membuat font lebih tebal lagi;
• 100 sampai 900 rentang angka ketebalan.

Contoh penggunaan:

Artinya:

Kita akan mengatur ketebalan font semua elemen

dengan font yang lebih tebal.

Mari kita coba latihan!

Buatlah file HTML baru dengan nama font-weight.html, kemudian isi dengan kode berikut:

    
    
    
    Contoh Font Weight
    
        h2 {
            font-weight: bold;
        }

        .light {
            font-weight: lighter;
        }

        .bold {
            font-weight: bold;
        }
    


    Contoh Font Weight
    Font Weight berfungsi untuk Menentukan Ketebalan Font
    Ini adalah contoh paragraf dengan font-weight bold

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada paragraf pertama, kita mengatur ketebalan font-nya dengan lighter, akan tetapi hasilnya normal.

Mengapa?

Ini karena font yang digunakan tidak memiliki font dengan ketebalan tipis atau lighter.

Coba ganti jenis font-nya, misalnya pakai roboto.

Tambahkan CSS berikut:

body {
	font-family: roboto;
}

Pastikan font roboto sudah terinstal di komputermu.

Maka hasilnya akan seperti ini:

Ketebalan font pada paragraf pertama akan lebih tipis, karena font Roboto punya ketebalan lighter.

Mengatur Font Style

Properti font-style digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah:

• normal – teks normal;
• italic – teks miring [italic];
• oblique – teks miring seperti italic;

Contoh:

blockquote {
	font-style: italic;
}

Artinya:

Kita akan mengatur semua elemen

dengan style font miring.

Biar lebih jelas, mari kita coba latihan.

Buatlah file baru dengan nama font-style.html, kemudian isi dengan kode berikut:

    
    
    
    Contoh Font Style
    
        blockquote {
            font-style: italic;
            font-size: larger;
            color: dodgerblue;
        }
        cite {
            font-size: small;
            font-style: normal;
            color: fuchsia;
        }
    


    Contoh Font Style
    
        "Hidup itu sebentar. Kamu harus bisa tersenyum saat merasakan kepedihan atau kita tak akan pernah melanjutkan hidup".
        ~ Jeff Ross
    

Setelah itu, buka dengan web browser.

Maka hasilnya:

Pada contoh ini, kita mengatur font style untuk elemen

menjadi italic dan menjadi normal.

Mengatur Jenis Font

Untuk mengatur jenis font, kita bisa gunakan properti font-family. Properti ini bisa kita isi dengan nama font dan juga nama family dari font.

Secara umum ada lima jenis family font:

• Sans Serif – Font tanpa tanduk;
• Serif – Font yang ujungnya punya tanduk;
• Monospace – Font dengan ukuran space yang sama;
• Cursive – Font seperti tulisan tangan;
• Fantasy – Font dengan bentuk yang menarik.

Contoh:

Font Sans
Font Serif
Font Monospace
Font Cursive
Font Fantasy

Hasilnya:

Font yang dipakai akan menggunakan default font yang dipakai pada sistem.

Selain menggunakan nama family, kita juga bisa menggunakan nama font-nya langsung.

Mari kita coba!

Buatlah file HTML baru dengan nama font-family.html, kemudian isi dengan kode berikut:

    
    
    
    Contoh Font Family
    
        h2 {
            font-family: Arial, Helvetica, sans-serif;
        }

        p {
            font-family: cursive;
        }
    


    Contoh Font Family

    Ini adalah contoh paragraf dengan font family cursive.
        Jenis font cursive adalah font yang terlihat seperti
        tulisan tangan. Biasanya digunakan untuk teks yang non-formal,
        seperti teks untuk komik dan cerita.
    

Setelah itu, buka dengan browser.

Maka hasilnya:

Coba perhatikan pada kode CSS untuk elemen

.

h2 {
	font-family: Arial, Helvetica, sans-serif;
}

Pada kode CSS ini, kita menggunakan tiga font, yakni Arial, Halvetica, dan sans-serif.

Jika di komputer kita tidak ada font Arial, maka font Halvetica yang akan dipakai. Begitu juga jika tidak ada font Halvetica, maka font sans-serif yang akan dipakai.

Selain menggunakan font yang sudah terinstal di komputer, kita juga bisa menggunakan font yang ada di internet. Contohnya seperti Google Font.

Mari kita pelajari..

Menggunakan Font dari Google

Untuk menggunakan font dari Google Font, kita harus mengimpor font-nya terlebih dahulu dengan tag di HTML atau kata kunci @import di CSS.

Contoh: dengan tag di HTML.

Contoh: dengan kata kunci @import di CSS.

@import url['//fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap'];

Biar lebih paham, mari kita coba latihan.

Buatlah file baru dengan nama font-google.html, kemudian isi dengan kode berikut:

    
    
    
    Contoh Font dari Google
    
        h2 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    



    Contoh Font dari Google
    Ini adalah paragraf yang menggunakan font dari Google.
    

Pada contoh ini kita belum mengimpor font dari Google.

Maka tampilannya akan seperti ini:

Font yang digunakan adalah font cursive yang ada di komputer.

Sekarang mari kita coba tambahkan font dari Google.

Silahkan buka font berikut:

• Permanent Marker
• Caveat

Setelah itu, klik Select this style.

Setelah itu, kita akan mendapatkan kode untuk mengimpor font ke HTML.

Silahkan copy kode tersebut, kemudian taruh di dalam tag kode kita.

Sehingga sekarang kodenya menjadi seperti ini:

    
    
    
    Contoh Font dari Google
    
    
    
    
    
        h2 {
            font-family: 'Permanent Marker', cursive;
        }
        
        p {
            font-family: 'Caveat', cursive;
        }
    



    Contoh Font dari Google
    Ini adalah paragraf yang menggunakan font dari Google.
    

Maka hasilnya:

Mantap, sekarang font yang digunakan adalah font dari Google.

Apa Selanjutnya?

Kita sudah belajar mengatur font dengan properti font, sebenarnya masih ada lagi properti yang belum kita bahas seperti font-kerning, font-pallete, font-synthesis, dan sebagainya.

Yang sudah kita bahas di atas, adalah yang paling sering dipakai. Sisanya silahkan lakukan eksperimen sendiri di inspect element.

Selanjutnya silahkan peljari tentang border di CSS.

Selamat belajar. 🙌