Teks pada CSS

Posted by on
Selain warna,kita harus memperhatikan jenis teks/font yang kita gunakan dalam CSS.Mengapa demikian?Karena meskipun kita bisa memilih banyak font ,tetapi penting kita ingat bahwa font yang akan ditampilkan di browser ,adalah browser yang berasal dari komputer para masing-masing pengunjung.Artinya,jika kita memilih font yang tidak standar,maka desain web yang kita buat akan terlihat berantakan jika font yang kita gunakan tidak didukung oleh komputer pengunjung.

JENIS-JENIS FONT STANDAR CSS

Font yang dianggap umum itu kemudian dikenal dengan istilah Font Standar.Font standar bisa dibagi berdasarkan model hurufnya,yaitu serif, sans-serif, monospace, cursive, dan fantasy.

  • Serif : font jenis serif adalah font yang memiliki ornamen kaki pada setiap hurufnya.Cotoh jenis font Times New Roman dan Georgia.
  • Sans-Serif : jenis font yang tidak memiliki ornamen pada kakinya.Contoh Arial, Verdana, Trebuchet MS,Helvetica dan Calibri.
  • Monospace : font yang ukuran setiap karakternya sama panjang.Contoh font jenis ini adalah Courier,Courier New,dan Andale Mono.
  • Cursive : jenis font ini menyerupai tulisan tangan atau kaligrafi.Contoh Comic Sans.
  • Jenis Font Fantasy : jenis ini terlihat imajinatif dan kreatif seperti ornamen-ornamen atau kartun

MENGUBAH JENIS FONT

Untuk mengubah jenis font yang ingin kita gunakan dalam desain website,kita bisa menggunakan property CSS : font-family.Berikut adalah contohnya :

<style type="text/css>
body {font-family: Arial;}
p {font-family: Courier,monospace;}
</style>

Pada potongan kode CSS di atas,terlihat bahwa nilai yang didukung oleh property font-family adalah nama-nama font yang ingin kita gunakan.Kita memberikan nilai property lebih dari 1 font.Tujuannya adalah jika satu font tidak ada (yang ditulis paling awal),maka akan digantikan dengan font yang lainnya (yang ditulis selanjutnya).

ATURAN PEMBERIAN NILAI UNTUK NAMA FONT

Saat menuliskan nilai untuk nama font,kita terikat dengan beberapa aturan sebagai berikut :
  1. Huruf pertama nama font harus menggunakan huruf kapital contohnya penulisan font "arial" harus ditulis menjadi "Arial".Tetapi aturan ini tidak berlaku jika kita hanya menyebutkanjenis font.Contohnya monospace,sans-serif,cursive,dan lain-lain.
  2. Untuk memisahkan antara satu font dan font yang lainnya,kita perlu menggunakan tanda koma.
  3. Jika nama font tersebut mengandung spasi,maka harus ditulis di dalam tanda petik,misalnya "Times New Roman"
Berikut adalah contoh latihan HTMLdan CSS dengan penggunaan property font-family :

<!DOCTYPE HTML>
<html>
<head>
<title>Latihan Font</title>
<style type="text/css">

body {font-family: Calibri,Helvetica,Arial,sans-serif;}
h1 {font-family: "Times New Roman",serif;}
#huruf {font-family: Georgia,serif;}

</style>
</head>
<body>

<h1>So Ist Es Immer</h1>

<p id="huruf">
Die Stühle liegen sehr eng
Wir reden die ganze Nacht lang
Dieser niedrige Raum ist nicht schlecht
Wir können uns gut verstehen
So ist es immer, unser Licht ist nur das
Trinken und singen wir, begrüßen morgen
So ist es immer, unter'm riesigen Himmel
Leben wir zusammen, die Nacht ist lang
Da die Sterne nicht leuchten
Kann der Mond auf diese Stadt nicht scheinen
Schauten wir das Licht selbst an
Singen wir unter dem Sternenmeer
</p>

<p>
Chairs so close and room so small
You and I talk all the night long
Meagre this space but serves us so well
We comrades have stories to tell
And it's always like that in the evening time
We drink and we sing when our fighting is done
And it's always so we live under the burnt clouds
Ease our burden, long is the night
Just as no stars can be seen
We are stars and we'll beam on our town
We must all gather as one
Sing with hope and the fear will be gone
</p>

<p id="huruf">
Die Stühle liegen sehr eng
You and I talk all the night long
Dieser niedrige Raum ist nicht schlecht
We comrades have stories to tell
So ist es immer, denn immer im Ertrag
We drink and we sing when our fighting is done
So ist es immer, we live under the burnt clouds
Ease our burden, long is the night
Da die Sterne nicht leuchten
We are stars and we'll beam on our town
Schauten wir das Licht selbst an
Sing with hope and the fear will be gone
</p>

</body>
</html>

Hasilnya :


Sekian pembahasan mengenai jenis teks pada CSS.Semoga ilmu yang dibagikan dapat bermanfaat bagi yang membutuhkan ^ ^.Terima Kasih !


Comments

Post a Comment