Tutorial CSS Untuk Pemula - Cara Menggunakan Property Font Pada CSS

Jan 12, 2020

Berbicara tentang mengatur tampilan website, disamping mengatur tata letak dan warna tampilan juga penting bagi kita untuk mengatur tulisan yang kita buat, baik secara isi maupun secara tampilan.

Sebab tulisan merupakan bagian terpenting dalam sebuah website yang mana tulisan tersebut merupakan diantara menjadi sebab seseorang mau untuk berkunjung ke website kita.

Memiliki konten dengan isi tulisan yang bagus dan menarik untuk dibaca adalah hal yang wajib untuk anda buat dan anda miliki. Akan tetapi, isi tulisan yang bagus dan menarik terkadang tidak menjadi menarik dan menyenangkan untuk dibaca jika tidak tersusun dengan rapi dan indah.

Oleh karena itu, pada tutorial kali ini kita akan membahas tentang cara mengatur tampilan tulisan dengan kode CSS.

Dalam CSS terdapat beberapa macam property yang berfungsi untuk mengatur tulisan, mulai dari pemilihan font, pengaturan warna, pengaturan tata letak dan lain sebagainya.

Dan pada kesempatan kali ini kita akan membahas tentang salah satu jenis property yang memang ditujukan untuk mengatur tulisan, yaitu property font.

Property font sendiri memiliki beberapa macam property yang berbeda-beda dan kita akan membahas property-property tersebut satu persatu.

Sebelum kita mulai, silahkan anda buat sebuah folder terlebih dahulu didesktop anda dengan nama belajar_property_font_css yang in sya aLLAH akan kita gunakan untuk menyimpan file yang akan kita buat nanti, dan jangan lupa untuk memastikan teks editor dan browser anda bisa berfungsi dengan baik.

folder belajar_mengatur_tulisan_css

Jika semua persiapan diatas sudah dilakukan maka saatnya kita masuk ke pembahasan.

MENGENAL MACAM-MACAM PROPERTY FONT PADA CSS

FONT-FAMILY

Property yang pertama akan kita bahas adalah property font-family. Property ini berfungsi untuk mengubah font atau model tulisan pada website kita.

Nilai yang bisa digunakan pada property font-family ini yaitu nama dari sebuah font atau model tulisan.

Ada sangat banyak sekali macam-macam font yang bisa kita gunakan untuk mengatur model tulisan pada website kita. Untuk memilih font kita bisa memasukkan jenis font secara umum atau kelompok dan bisa juga secara khusus atau spesifik.

Diantara contoh jenis font secara kelompok dan secara spesifik yang bisa kita gunakan yaitu :

Secara Kolompok Secara Spesifik
Serif Cambria, Georgia, Lucida Bright, Rockwell, Times New Roman
San-serif Arial Black, Calibri, Tahoma, Lucida Sans, Verdana
Monospace Courier New, Courier, Monaco , Lucida Console

Contoh penulisan kode penggunaan property font-family adalah sebagai berikut:

  • Secara Kelompok
  • Secara Khusus
font-family: serif;

font-family: Tahoma;

Akan tetapi dalam penerapannya terkadang jenis font yang kita pasang tidak terbaca, sehingga kita perlu menyertakan beberapa font cadangan jika font utama kita tidak bisa ditampilkan.

Cara penulisannya adalah dengan memberikan tanda koma untuk memisahkan antara font yang satu dengan font yang lain, dan untuk font yang memiliki nama lebih dari satu kata seperti Times New Roman ditulis dengan diapit dua tanda kutip sehingga menjadi seperti ini : "Times New Roman".

Untuk contoh penulisanya adalah sebagai berikut :

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif

Anda juga bisa menggunakan beberapa saran gabungan font seperti diatas dari website https://www.cssfontstack.com.

Setelah kita memahami penjelasan diatas, maka sekarang saatnya bagi kita untuk mempraktekkan penggunaan property font-family diatas.

Silahkan buka teks editor anda (buat file baru) kemudian ketikkan atau copy-paste dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Mengganti Font</title>
	<style type="text/css">
		*{
           font-size: 20px;
           font-weight: bolder;
		}
		.cambria{
			font-family: Cambria;
		}

		.TNR{
			font-family: "Times New Roman";
		}
		
		.serif{
			font-family: serif;
		}

		
		.tahoma{
			font-family: Tahoma;
		}

		.AB{
			font-family: "Arial Black";
		}
		
		.san{
			font-family: sans-serif;
		}

		
		
		.CN{
			font-family: "Courier New";
		}
		
		.monaco{
			font-family: Monaco;
		}

		.mono{
			font-family: monospace;
		}
		

		.calibri{
			font-family: Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,sans-serif;
		}

		.candara{
			font-family: Candara,Calibri,Segoe,"Segoe UI",Optima,Arial,sans-serif;
		}
		.bsmt{
			font-family: "Brush Script MT",cursive;
		}
	</style>
</head>
<body>

<p class="cambria"> Ini adalah contoh tulisan dengan font Cambria</p>
<p class="TNR"> Ini adalah contoh tulisan dengan font TNR</p>
<p class="serif"> Ini adalah contoh tulisan dengan font Serif</p>
<p class="tahoma"> Ini adalah contoh tulisan dengan font Tahoma</p>
<p class="AB"> Ini adalah contoh tulisan dengan font Arial Black</p>
<p class="san"> Ini adalah contoh tulisan dengan font San-Serif</p>
<p class="CN"> Ini adalah contoh tulisan dengan font Courier New</p>
<p class="monaco"> Ini adalah contoh tulisan dengan font Monaco</p>
<p class="mono"> Ini adalah contoh tulisan dengan font Monospace</p>
<p class="calibri_FC"> Ini adalah contoh tulisan dengan font combination Calibri</p>
<p class="candara"> Ini adalah contoh tulisan dengan font combination Candara</p>
<p class="bsmt"> Ini adalah contoh tulisan dengan font combination Brush Script MT</p>

</body>
</html>

Kemudian simpan dengan nama font-family.html didalam folder belajar_property_font_css, lalu jalankan dibrowser anda, maka hasilnya kira-kira seperti ini :

contoh penerapan property font-family

Beberapa font mungkin tidak tampil sebagaimana mestinya, sebab pada dasarnya font tersebut merupakan font yang terdapat pada komputer kita, jika tidak ada font yang dimaskud maka browser akan menampilkan font standart.

FONT-STYLE

Jika pada tutorial sebelumnya kita telah berkenalan dengan property border-style maka sekarang mari kita berkenalan dengan property font-style.

Property font-style merupakan property berfungsi untuk mengubah gaya font atau tulisan pada Tag atau Element HTML.

Nilai yang bisa digunakan pada property ini ada tiga macam, yaitu :

  • normal : menampilkan tulisan dengan gaya normal
  • italic : menampilkan tulisan dengan gaya miring
  • oblique : menampilkan tulisan dengan gaya miring
font-style: italic;

Untuk lebih jelasnya tentang property font-style ini mari kita praktekkan langsung ke dalam file HTML.

Silahkan buka teks editor anda (buat file baru) lalu ketikkan atau copy-paste kode dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Property Font-Style</title>
	<style type="text/css">
		*{
           font-size: 20px;
           font-weight: bolder;
		}

		.normal{
			font-style: normal;
		}

		.italic{
			font-style: italic;
		}

		.oblique{
			font-style: oblique;
		}
	</style>
</head>
<body>

<p class="normal"> Ini adalah contoh tulisan dengan font Normal</p>
<p class="italic"> Ini adalah contoh tulisan dengan font Italic</p>
<p class="oblique"> Ini adalah contoh tulisan dengan gaya font Oblique</p>

</body>
</html>

Kemudian simpan didalam folder belajar_property_font_css dengan nama font_style.html, lalu jalankan dibrowser anda, maka hasilnya kira-kira akan seperti ini :

contoh penerapan property font-style

FONT-SIZE

Sesuai namanya, property font-size merupakan property yang berfungsi untuk mengatur ukuran font atau tulisan pada sebuah Tag atau Element HTML.

Dalam penggunaannya property ini memiliki beberapa macam nilai yang bisa digunakan,  yaitu :

  • medium : mengubah ukuran tulisan ke ukuran medium.

Contoh penulisan kode :
css font-size: medium;

  • xx-small : mengubah ukuran tulisan ke ukuran xx-small (super kecil).

Contoh penulisan kode :
css font-size: xx-small;

  • x-small : mengubah ukuran tulisan ke ukuran x-small (sangat kecil).

Contoh penulisan kode :
css font-size: x-small;

  • small : mengubah ukuran tulisan ke ukuran small (kecil).

Contoh penulisan kode :
css font-size: small;

  • smaller :  mengubah ukuran tulisan ke ukuran menjadi lebih kecil daripada Tag atau Element HTML yang memuatnya.

Contoh penulisan kode :
css font-size: smaller;

  • large : mengubah ukuran tulisan ke ukuran large (besar).

Contoh penulisan kode :
css font-size: large;

  • x-large : mengubah ukuran tulisan ke ukuran x-large (sangat besar).

Contoh penulisan kode :
css font-size: x-large;

  • xx-large : mengubah ukuran tulisan ke ukuran xx-large (super besar).

Contoh penulisan kode :
css font-size: xx-large;

  • larger :  mengubah ukuran tulisan ke ukuran menjadi lebih lebih besar daripada Tag atau Element HTML yang memuatnya.

Contoh penulisan kode :
css font-size: larger;

  • ukuran : yaitu nilai berupa angka dengan diakhiri satu satuab tertentu.

Contoh penulisan kode :
css font-size: 25px;

  • persentase : yaitu nilai berupa perhitungan persentase.

Contoh penulisan kode :
css font-size: 10%;

Setelah kita memahami penjelasn diatas, mari kita coba terapkan kode-kode diatas tersebut ke dalam file HTML untuk melihat hasilnya.

Silahkan bkua teks editor anda (buat file baru) kemudian ketikkan atau copy-paste dibawah ini :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Mengganti Ukuran Font Dengan CSS</title>
	<style type="text/css">
		.medium{
			font-size: medium;
		}

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

		
		.small{
			font-size: small;

		}


		.smaller{
			font-size: smaller;
		}


		.large{
			font-size: large;
		}
		
		.x-large{
			font-size: x-large;
		}

		
		
		.xx-large{
			font-size: xx-large;
		}
		

		.larger{
			font-size: larger;
		}
		

		.ukuran{
			font-size: 24px;
		}

		.persentase{
			font-size:100%;
		}
	</style>
</head>
<body>

<p class="medium"> Ini adalah contoh tulisan dengan font medium</p>
<p class="xx-small"> Ini adalah contoh tulisan dengan font xx-small</p>
<p class="x-small"> Ini adalah contoh tulisan dengan font x-small</p>
<p class="small"> Ini adalah contoh tulisan dengan font small</p>
<p class="large"> Ini adalah contoh tulisan dengan font large</p>
<p class="x-large"> Ini adalah contoh tulisan dengan font x-large</p>
<p class="xx-large"> Ini adalah contoh tulisan dengan font xx-large</p>
<p class="smaller"> Ini adalah contoh tulisan dengan font smaller</p>
<p class="larger"> Ini adalah contoh tulisan dengan font larger</p>
<p class="ukuran"> Ini adalah contoh tulisan dengan font ukuran 2px</p>
<p class="persentase"> Ini adalah contoh tulisan dengan font persentase 100%</p>

</body>
</html>

Kemudian simpan didalam folder belajar_property_font_css dengan nama font_size.html, lalu jalankan dibrowser anda, maka hasilnya kira-kira akan seperti ini :

contnoh penerapan property font-size

Nah itulah beberapa property yang berfungsi untuk mengatur tulisan dengan kode CSS pada sebuah website.

Bagaimana? Sangat jelas dan sangat mudah untuk dipahami bukan?

in sya aLLAH akan kita lanjutkan pembahasannya pada tutorial selanjutnya.

Semoga bermanfaat.

ibnulhusainan

Saya sangat suka belajar berbagai macam bahasa pemrograman.