Iklan bawah header

Belajar CSS : Mengubah Font dengan CSS

font

Font merupakan jenis huruf yang biasa digunakan dalam sebuah dokumen seperti pada microsoft office, ataupun pada dokumen yang lainnya. Microsoft sendiri mengartikan font sebagai design grafis yang diterapkan ke kumpulan angka, simbol dan karakter.

Pada tutorial kali ini kita akan membahas tentang cara merubah font dengan CSS. Sebelum masuk ke tutorialnya, kita akan membahas terlebih dahulu mengenai jenis-jenis font standar CSS.

Mengenal Jenis-jenis Font Standar CSS

Font standar atau font generik merupakan jenis font yang pada umumnya sudah tersedia di hampir semua sistem. Terdapat 5 jenis font standar / font generik jika dikategorikan sesuai dengan jenis bentuknya yakni, font serif, sans-serif, monospace, cursive dan fantasy.

Font Serif

Font serif merupakan font yang memiliki kaki pada setiap hurufnya. Jenis font ini banyak digunakan untuk media cetak kertas karena tulisan dengan jenis font ini akan terlihat lebih rapi dan mudah dibaca. Contoh dari jenis font ini adalah Georgia, Times New Roman, Cooper Black, Gramond dan lainnya.

Font Sans-Serif

Jenis font ini merupakan kebalikan dari jenis font serif. Jika pada font serif memiliki garis kecil pada setiap hurufnya, maka sans-serif tidak memiliki garis kecil. Contohnya seperti Comic Sans MS, Tahoma, Verdana dan Arial.

Font Monospace

Font monospace merupakan jenis font yang memiliki spasi yang cukup besar dari setiap hurufnya. Hal ini bisa kalian lihat dari jarak perhurufnya. Contoh font jenis ini yaitu Rursus Compact Mono, OCR-A, Courier New dan NotCourier-Sans.

Font Cursive

Font dengan jenis ini merupakan jenis font yang meniru tulisan tangan atau kaligrafi. Penggunaan dari font cursive biasanya digunakan pada tulisan yang tidak terlalu formal. contoh dari font ini adalah Comic Sans.

Font Fantasy

Font Fantasy merupakan jenis font yang bersifat visual dengan karakter yang khusus seperti font disney, matrix dan lainnya.

Cara Mengubah Font dengan CSS

Setelah mempelajari tentang jenis-jenis font, selanjutnya kita akan langsung masuk ke materi inti nya. Untuk merubah font pada CSS, property yang akan kita gunakan yaitu property CSS font-family. Sebenarnya terdapat cara lain juga yang bisa kita gunakan yaitu dengan menggunakan @font-face. Namun untuk pembahasan kali ini kita akan menggunakan font-family terlebih dahulu.

Berikut contoh penggunaan dari font-family.

index.html


<!DOCTYPE html>

<html>

<head>

	<title>Font CSS</title>
	<style>
	.serif {

		font-family: "Times New Roman", Times, serif;

	}


	.sanserif {

		font-family: Arial, Helvetica, sans-serif;

	}


	.monospace {

		font-family: "Courier New", Courier, Monospace;

	}
	</style>

</head>

<body>

	<h1>Belajar Mengubah Font dengan CSS</h1>

	<h3>Font Serif</h3>

<p class="serif">Font serif merupakan font yang memiliki kaki pada setiap hurufnya. Jenis font ini banyak digunakan untuk media cetak kertas karena tulisan dengan jenis font ini akan terlihat lebih rapi dan mudah dibaca. Contoh dari jenis font ini adalah Georgia, Times New Roman, Cooper Black, Gramond dan lainnya.</p>

<h3>Font Sans-Serif</h3>

<p class="sanserif">Jenis font ini merupakan kebalikan dari jenis font serif. Jika pada font serif memiliki garis kecil pada setiap hurufnya, maka sans-serif tidak memiliki garis kecil. Contohnya seperti Comic Sans MS, Tahoma, Verdana dan Arial.</p>

<h3>Font Monospace</h3>

<p class="monospace">Font monospace merupakan jenis font yang memiliki spasi yang cukup besar dari setiap hurufnya. Hal ini bisa kalian lihat dari jarak perhurufnya. Contoh font jenis ini yaitu Rursus Compact Mono, OCR-A, Courier New dan NotCourier-Sans.</p>

<h3>Font Cursive</h3>

<p>Font dengan jenis ini merupakan jenis font yang meniru tulisan tangan atau kaligrafi. Penggunaan dari font cursive biasanya digunakan pada tulisan yang tidak terlalu formal. contoh dari font ini adalah Comic Sans.</p>

<h3>Font Fantasy</h3>

<p>Font Fantasy merupakan jenis font yang bersifat visual dengan karakter yang khusus seperti font disney, matrix dan lainnya.</p>


</body>

</html>

Berikut hasil yang ditampilkan:

font-family

Terdapat beberapa hal yang perlu kalian ingat dalam memberikan nama font yaitu.

  • Pada setiap penulisan nama font, huruf pertama harus ditulis dengan menggunakan huruf besar, contoh: penulisan font "arial" maka harus ditulis menjadi "Arial". Aturan ini tidak berlaku untuk jenis font monospace dan sans-serif.

  • Untuk memisahakan antara satu font dengan font lainnya harus menggunakan tanda koma.

  • Jika nama font yang ditulis memiliki spasi, maka penulisan nama font harus menggunakan tanda kutip.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel