CSS - Merubah Font

Materi kali ini masih berkaitan dengan text dan color, dua materi sebelumnya yang sudah dibahas. Kadang ketika kita mendesain web dengan CSS, setelah lakukan uji coba ternyata kita tidak menyukai hasil background website. Bahkan warna-warna yang telah dipilih benar-benar jelek dan sangat sulit bagi Anda untuk melihat. Dan disini seperti yang kami sarankan sebelumnya selalu lakukan uji coba, praktek sampai anda benar-benar puas dengan hasilnya.

Kadang anda mesti mengubah navigasi atau bahkan font dari style text anda. Ya kadang font standar menghasilkan desain yang monoton atau tidak menarik, setidaknya untuk saya pribadi. Maka disini kita akan coba varian font. Saya suka varian font. Karena memungkinkan Anda memasukkan segala sesuatu ke dalam huruf besar, huruf kecil, atau hal-hal yang berbeda seperti itu.

Kami juga memiliki ukuran font. Saya masih belum puas dengan ukurannya, sehingga akan membuatnya 150%, dan yang terakhir saya coba test mengubah font familiy-nya Sekarang jika Anda ingat, dengan font-family yang sangat umum untuk memberikannya lebih dari satu nilai karena tidak semua browser mendukung setiap font-family.

Jadi dalam kasus ini, kita mencoba berbagai macam font family seperti Arial, Times New Roman. Jika Anda memiliki font itu terdiri dari beberapa kata, Anda harus menempatkannya di dalam tanda kutip. Dan tinggal bagaimana cara mengkodekan. Kadang terjadi kesalahan kode. Untuk itu kita pelajari, bagaimana cara anda mengatur font suatu konten yang tersedia dalam elemen HTML. Jadi kenali dulu property dari font

  • Properti font-family digunakan untuk mengubah wajah font, seperti Arial, Times New Roman
  • Properti font-style digunakan untuk membuat font italic atau oblique
  • Properti font-variant digunakan untuk membuat efek huruf capital atau huruf kecil
  • Properti font-weight digunakan untuk menambah atau mengurangi ketebalan dan keterangan huruf
  • Properti font-size digunakan untuk menambah atau mengurangi ukuran font

Mengetahui property font diatas akan memudahkan anda menuliskan kode yang sesuai style yang diinginkan. Seperti misalnya saya punya warna background, dan saya mesti memilih warna yang sesuai untuk h2. Jadi h2 saya akan memilih warna yang berbeda. Namun tampaknya ukuran h2 tidak terlalu menarik sesuai background yang saya pilih, saya putuskan membuat code yang berkaitan dengan font ini. Kodenya bisa seperti ini:

Jenis Font

<html>
   <head>
   </head>
   <body>

<style type="text/css">
  p {
    font-family: "georgia", "garamond", Palatino, serif;
  }
</style>

      <p>Teks ini diterjemahkan dalam font georgia, garamond, atau font serif default tergantung pada font yang Anda miliki di sistem Anda.  </p>
   </body>
</html>
Hasil

cssfont1

Saya refresh dan mulai terlihat jauh berbeda. Ini tidak banyak gaya. Hanya satu, dua, tiga, empat, lima. Lima aturan dan kita sudah memiliki tampilan yang jauh berbeda. Kita pun bisa mengubah font-style:

Gaya Font

<html>
   <head>
   </head>
   <body>

<style type="text/css">
p {
font-family: "georgia", "garamond", Palatino, serif;
font-style:italic;
  }
</style>

      <p> Teks ini diterjemahkan dalam font georgia, garamond, atau font serif default tergantung pada font yang Anda miliki di sistem Anda, dengan style italic
      </p>
   </body>
</html>
Hasil

cssfont2

Sepertinya sudah agak menarik. Kemudian saya memasukkan ukuran font itu 150%, itu membuat perbedaan besar.

Ukuran Font

<html>
   <head>
   </head>
   <body>

<style type="text/css">
p {
font-family: "georgia", "garamond", Palatino, serif;
font-style:italic;
font-size:150%;
  }
</style>

      <p> Teks ini diterjemahkan dalam font georgia, garamond, atau font serif default tergantung pada font yang Anda miliki di sistem Anda, dengan style italic dengan ukuran 150%
      </p>
   </body>
</html>

Hasil

cssfont3

Baiklah. Salah satu hal keren terakhir yang saya inginkan coba Anda lakukan adalah teruskan dan coba rangkai ringkasan dalam detailnya.

Jadi mengatur ukuran font suatu elemen. Properti font-size digunakan untuk mengontrol ukuran font. Value yang bisa digunakan xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam pixel atau dalam % seperti contoh diatas, atau contoh kode berikut

Ukuran Font

<html>
<head>
<title>Font Size CSS</title>
<style>
.font1{ font-size:20px;}
.font2{ font-size:small;}
.font3{ font-size:large;}
</style>
</head>
<body>

<h1 class="font1"> Ukuran font 20px	</h1>
<h1 class="font2"> Ukuran font small</h1>
<h1 class="font3"> Ukuran font large</h1>
</body>
</html>
Hasil

cssfont4

Anda pun juga bisa mengatur ketebalan suatu font, dengan value yang digunakan; normal, bold, bolder, lighter atau angka seperti 100 tinggal anda uji coba hasil mana yang sesuai style anda

Font Manipulasi

<html>
<head>
<title>Font Weight CSS</title>
<style>
.font1{ font-weight:bold;}
.font2{ font-weight:lighter;}
.font3{ font-weight:200;}
</style>
</head>
<body>

<h1 class="font1"> Font tebal/bold</h1>
<h1 class="font2"> Font tipis</h1>
<h1 class="font3"> Font dengan ketebalan 200</h1>
</body>
</html>
Hasil

cssfont5

Oke untuk materi ini bisa menjadi pekerjaan rumah anda. Jadi berlatihlah di sini, dan yang penting adalah, kode, kode, kode, semoga berhasil.