Tutorial Belajar CSS Bagian 6 : Cara Menggunakan Properti Font di CSS

0
19

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 5 : Cara Menggunakan Properti Background di CSS, selanjutnya kita akan mempelajari cara menggunakan properti font di CSS.

Pada tutorial ini, kita akan belajar mengatur font konten yang ada di dalam elemen HTML. Berikut prperti yang digunakan untuk mengatur fnt dalam elemen HTML :

  • Properti font-family digunakan untuk mengubah tampilan font.
  • Properti font-style digunakan untuk membuat font menjadi miring atau blique.
  • Properti font-variant digunakan untuk membuat efek huruf kecil.
  • Properti font-weight digunakan untuk menambah atau mengurangi tampilan huruf tebal atau terang.
  • Properti font-size digunakan untuk menambah atau mengurangi ukuran font.
  • Properti font digunakan sebagai singkatan untuk menentukan sejumlah properti font lainnya.

Mengatur font-family

Berikut ini adalah contoh yang menunjukkan bagaimana mengatur font-family dari sebuah elemen. Biasanya diberi nilai berupa nama keluarga font apa saja.

<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         Kalimat ini akan ditampilkan dengan jenis huruf georgia, garamond, atau 
         font default serif tergantung jenis font  apa yang tersedia di komputer Anda.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-style

Berikut adalah contoh bagaimana mengatur gaya font dari sebuah elemen. Nilai yang biasanya digunakan adalah normal, italic dan oblique.

<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         Kalimat ini akan ditampilkan dalam gaya miring/italic
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-variant

Contoh berikut menunjukkan cara mengatur font-varian suatu elemen. Nilai yang biasanya digunakan adalah normal dan small-caps.

<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         Kalimat ini akan ditampilkan dalam huruf besar dan ukuran kecil
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-weight

Contoh berikut menunjukkan cara mengatur bobot font suatu elemen.

Properti ‘font-weight’ menyediakan fungsionalitas untuk menentukan seberapa tebal font tersebut.

Nilai yang biasanya digunakan adalah normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.

<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         Tulisan ini ditebalkan menggunakan nilai ‘bold’.
      </p>
      
      <p style = "font-weight:bolder;">
         Tulisan ini ditebalkan menggunakan nilai ‘bolder’.
      </p>
      
      <p style = "font-weight:500;">
         Tulisan ini memiliki besar 500.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-size

Contoh berikut menunjukkan cara mengatur ukuran font suatu elemen.

Properti ‘font-size’ digunakan untuk mengontrol ukuran font.

Nilai yang biasanya digunakan adalah xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam piksel atau dalam %.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         Ukuran font ini adalah 20 pixels
      </p>
      
      <p style = "font-size:small;">
         Ukuran font ini adalah small
      </p>
      
      <p style = "font-size:large;">
         Ukuran font ini adalah large
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-size-adjust

Contoh berikut menunjukkan cara mengatur penyesuaian ukuran font suatu elemen.

Properti ini memungkinkan Anda menyesuaikan tinggi-x untuk membuat font lebih terbaca.

Nilai yang biasanya digunakan memungkinkan bisa berupa angka apapun.

<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         Kalimat ini menggunakan properti font-size-adjust value.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Mengatur font-strecth

Contoh berikut menunjukkan cara menyetel bentangan font suatu elemen. Properti ini bergantung pada komputer pengguna untuk memiliki versi font yang diperluas atau ringkas yang digunakan.

Nilai yang biasanya digunakan adalah normal, wider, narrower, ultra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         Jika perubahan tidak tampak di komputer Anda, artinya komputer Anda tidak menyediakan
        <br>versi font condensed atau expanded yang dapat digunakan.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Shorthand Property

Untuk mempermudah, Anda dapat menggunakan properti ‘font’ untuk merangkum dan mengatur semua properti font sekaligus.

Sebagai contoh :

<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Menerapkan semua property dalam kalimat.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk memahami bagaimana cara menggunakan properti font di CSS untuk membuat tampilan huruf menjadi lebih bagus.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.