Jum'at, 22 Oktober 2021

cara mengatur font dengan CSS

Pada tutorial sebelumnya saya telah membahas tentang cara merubah warna background dengan CSS. Pada kesempatan kali ini saya akan membahas tentang cara mengatur font dengan CSS.


Font adalah jenis huruf yang digunakan di dalam sebuah dokumen. Pada aplikasi pengolah kata seperti Microsoft Word, terdapat puluhan bahkan ratusan jenis font yang bisa kita pilih. Font-font ini berasal dari sistem Windows atau dari beberapa aplikasi lain. Pada tutorial ini saya akan menjelaskan cara melakukan pengaturan font dengan CSS, seperti merubah jenis font, mengatur ukuran font, mengatur warna font dan bentuk font(tulisan miring, huruf tebal). Sebelum masuk ke pembahasan tentang cara mengatur font dengan CSS, saya akan menguraikan jenis-jenis font standar pada CSS.

Jenis-jenis Font Standar CSS

Font Standar / Font Generik adalah jenis font yang umumnya tersedia pada hampir semua sistem. Berdasarkan ’bentuknya’, font standar/font generik terbagi menjadi 5 jenis, yaitu serif, sans-serif, monospace, cursive, dan fantasy.

  1. Font Serif
    Font serif adalah jenis font yang memiliki ‘kaki’ pada setiap hurufnya. Contoh font serif adalah Times New Roman dan Georgia. Font ini biasanya digunakan untuk media cetak kertas karena akan terkesan rapi dan mudah dibaca.
  2. Font Sans-serif
    Font sans-serif adalah font yang tidak memiliki ‘kaki’ pada setiap ujung karakternya. Contoh font sans-serif adalah Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font sans-serif sering digunakan di media elektronik seperti web.
  3. Font Monospace
    Font monospace adalah font yang lebar setiap karakternya sama panjangnya. Contoh font monospace adalah CourierCourier New, dan Andale Mono. Biasanya font ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.
  4. Font Cursive
    Font cursive adalah font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh font cursive adalah Comic Sans. Font ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.
  5. Font Fantasy
    Font fantasy adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dan lain-lain. Font fantasy jarang digunakan untuk text halaman.

Cara Mengubah Jenis Font

Beberapa syntax CSS yang sering digunakan untuk mengatur dan mengubah font:

  • font-size = digunakan untuk mengatur ukuran font.
  • font-weight = digunakan untuk mengatur ketebalan font.
  • font-family = digunakan untuk mengubah jenis font.
  • font-style = digunakan untuk memberikan gaya pada font.
  • font-color = digunakan untuk merubah warna font.

Berikut adalah contoh penggunaan syntax CSS untuk mengatur font. Silahkan Anda buat file HTML dengan nama “index.html”.
cara mengatur font dengan CSS
Silahkan simpan file HTML diatas dengan nama “index.html”, kemudian buat satu file css dengan nama “style.css”.
cara mengatur font dengan CSS
Silahkan simpan file css diatas dengan nama “style.css”, pastikan file “style.css” disimpan dalam satu folder dengan file “index.html”. Kemudian jalankan file “index.html” menggunakan browser kesayangan Anda.

Jika tidak terjadi kesalahan, maka hasilnya seperti berikut:

cara mengatur font dengan css

Dari gambar diatas kita bisa melihat bahwa untuk merubah ukuran font bisa menggunakan perintah “font-size”, untuk mengatur lebar font menggunakan perintah “font-weight”, untuk merubah jenis font menggunakan perintah “font-family”, untuk mengatur gaya font menggunakan “font-style”, untuk merubah warna font menggunakan “color”.

Demikian tutorial tentang cara mengatur font dengan CSS, silahkan bagikan atau share artikel ini jika dirasa ada yang membutuhkan.

  • Share Post:
related posts
about author

Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.

recent posts
categories
trending posts
SERBA KOMPUTER © 2017 - 2019, ALL RIGHTS RESERVED.