ZenTutorials

Blog ini memuat artikel yang membahas tentang dunia teknologi informasi seperti Bahasa pemrograman, aplikasi dan internet.

populer android APPS

  1. apps
  2. apps
  3. apps
  4. apps

Populer android Games

  1. games
  2. games
  3. games
  4. games
  5. games

Selasa, 29 Januari 2019

Pengaturan font dengan CSS

Mengenal Jenis-jenis Font Standar CSS

Font Standar atau bisa juga di sebut Font Generik adalah jenis font yang sudah tersedia di hampir semua sistem operasi. Font generic berdasarkan bentuknya di bagi menjadi 5 jenis yaitu font serif, font sans-serif, font monospace, font cursive dan font fantasy.

  • Family font Serif

  • Font serif adalah jenis font yang memiliki kaki di setiap ujung hurufnya. Font yang masuk dalam katagori font sarif seperti Times New Roman dan Georgia. Font jenis sarif biasanya digunakan pada media cetak kertas karena akan lebih mudah untuk dibaca.

    Contoh font generic sarif

    ZenvHtml

  • Family font Sans-serif

  • Font sans-serif adalah font yang tidak memiliki kaki setiap ujung karakternya. Contoh font jenis sans-serif seperti font Arial, font Verdana, font Trebuchet MS, font Helvetica dan font Calibri. Font jenis sans-serif umumnya di gunakan pada perangkat digital seperti web dan aplikasi.

    Contoh font generic Sans-serif

    ZenvHtml

  • Family Font Monospace

  • Font monospace adalah font tampil lebar pada setiap karakternya dan identik sama panjangnya. Misalnya Huruf i kecil sama panjangnya dengan huruf w. Contoh dari font family ini seperti Font Courier, Font Courier New dan Font Andale Mono. Font seperti ini biasanya di gunakan untuk penulisan code program.

    Contoh font generic Monospace

    ZenvHtml

  • Family Font Cursive

  • Font cursive adalah font yang khas dengan tulisan tangan atau kaligrafi. Font family jenis Cursive seperti Comic Sans.

    Contoh font grneric Cursive

    ZenvHtml

  • Family Font Fantasy

  • Font fantasy adalah font yang bersifat visual dengan karakter khusus. Font jenis ini antara lain font disney, matrix dan lain-lain.

    Contoh font generic Fantasy

    ZenvHtml

    Contoh font-family sebagai berikut:

Memilih jenis font dengan CSS

Dengan CSS kita dapat menentukan sendiri jenis font yang akan kita gunakan di halaman web atau dokument HTML.

Property yang dapat kita gunakan untuk mentukan jenis font dengan CSS yakni property Font-family.

Property Font-family valuenya (nilainya) bisa di isi lebih dari satu jenis font.

Contoh Property font-family di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-family:Tahoma,Arial,sans-serif;
}

#p2 {
font-family:"Comic Sun",cursive;
}
</style>
</head>
<body>

<p id="p1" >Contoh penggunaan property font-family di CSS</p>
<p id="p2" >Contoh penggunaan property font-family di CSS</p>

</body>
</html>


Preview

Contoh penggunaan property font-family di CSS

Contoh penggunaan property font-family di CSS

Perhatikan font-family:Tahoma,Arial,sans-serif;, kita memberi tiga nilai sekaligus. Artinya, ketika web di muat oleh aplikasi browser, yang pertama kali akan di cari adalah jenis font Tahoma, jika font Tahoma tidak di temukan, maka sistem akan mencari font jenis Arial, jika masih tidak di temukan dalam komputer user, maka sistem akan menggunakan font generic sans-serif sebagai opsi terakhir.

Selanjutnya perhatikan font-family:"Comic Sun",cursive; kita memiliki dua jenis Font. font pertama "Comic Sun" jenis font di kurung dengan tanda petik dua (") artinya, ketika nama font terdapat sepasi, maka nama font harus di letakkan di antara dua tanda petik.


Menentukan gaya font dengan CSS

Selain kita bisa memilih jenis font di CSS, kita juga bisa menentukan gaya font dengan property Font-style.

Contoh property font-style di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-style:normal;
}

#p2 {
font-style:italic;
}

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

<p id="p1" >Contoh penggunaan property font-family di CSS</p>
<p id="p2" >Contoh penggunaan property font-family di CSS</p>
<p id="p3" >Contoh penggunaan property font-family di CSS</p>
</body>
</html>


Preview

Contoh penggunaan property font-family di CSS

Contoh penggunaan property font-family di CSS

Contoh penggunaan property font-family di CSS


Menentukan ukuran font dengan CSS

Menentukan ukuran font untuk web itu sangat penting, pasalnya font yang terlalu kecil akan mengakibatkan pusing saat teks di web kita di baca oleh user. Untuk menentukan ukuran font di CSS, kita dapat menggunakan property Font-size. property ini valuenya dengan satuan ukuran px, em, pt dan lain-lain.

Contoh property Font-size di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-size:10px;
}

#p2 {
font-size:20px;
}

#p3 {
font-size:30px;
}
</style>
</head>
<body>

<p id="p1" >Contoh penggunaan property font-size di CSS</p>
<p id="p2" >Contoh penggunaan property font-size di CSS</p>
<p id="p3" >Contoh penggunaan property font-size di CSS</p>
</body>
</html>


Preview

Contoh penggunaan property font-size di CSS

Contoh penggunaan property font-size di CSS

Contoh penggunaan property font-size di CSS

Mengatur ketebalan huruf dengan CSS

Selain menentukan ukuran font denaga property Font-size, kita juga dapat menentukan ketebalan font untuk mempermudah user saat membaca teks di halaman wab kita. Untuk menebtukan ketebalan font dengan CSS, kita dapat menggunakan property font-weight. Property ini memiliki 4 nilai standar yakni normal, lighter, bold dan bolder.

Contoh property Font-weight di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-weight:normal;
}

#p2 {
font-weight:lighter;
}

#p3 {
font-weight:bolder;
}

#p4 {
font-weight:bold;
}
</style>
</head>
<body>

<p id="p1" >Contoh penggunaan property font-weight di CSS</p>
<p id="p2" >Contoh penggunaan property font-weight di CSS</p>
<p id="p3" >Contoh penggunaan property font-weight di CSS</p>
<p id="p3" >Contoh penggunaan property font-weight di CSS</p>

</body>
</html>
</div>


Preview

Contoh penggunaan property font-weight di CSS

Contoh penggunaan property font-weight di CSS

Contoh penggunaan property font-weight di CSS

Contoh penggunaan property font-weight di CSS

variant font di CSS

Propery font-variant di gunakan untuk menentukan apakah font akan di tampilkan dengan huruf kapital atau tidak. Property ini memiliki 2 value yakni normal dan small-caps.

Contoh property Font-variant di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#p1 {
font-variant:normal;
}

#p2 {
font-variant:small-caps;
}
</style>
</head>
<body>

<p id="p1" >Contoh penggunaan property font-weight di CSS</p>
<p id="p2" >Contoh penggunaan property font-weight di CSS</p>

</body>
</html>


Preview

Contoh penggunaan property font-weight di CSS

Contoh penggunaan property font-weight di CSS

Property font-variant: small-caps; akan membuat font tampil kapital namun ukuran mengecil.

Masih banyak property untuk mendesain font yang akan kita bahas di update artikel selanjutnya.

Ikuti kami di media sosial untuk menerima pemberitahuan update artikel yang terbaru.

TERIMAKASIH...!

Admin ZenTutorials di Januari 29, 2019
Label: Bahasa pemrograman, CSS

Tidak ada komentar:

Posting Komentar

#Tanggapi artikel ini dengan berkomentar.
#Dilarang keras, komentar Spam, berbau SARA, PORNOGRAFI, PELECEHAN DAN UJARAN KEBENCIAN.
#Terimakasih di awal bagi yang berkomentar.

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Postingan Populer

  • else if di JAVA
    Pengkondisian atau Statement else IF ? Kondisional else IF sering di gunakan ketika ada lebih dari satu kondisi yang perlu di uji. struct...

Halaman

  • Beranda
  • Belajar Bahasa markup HTML
  • Belajar Bahasa pemrograman JavaScript
  • Belajar bahasa pemrograman PHP
  • Belajar bahasa pemrograman JAVA
  • Belajar Style CSS
  • Belajar bahasa pemrograman C++

Label

  • Bahasa pemrograman
  • C++
  • CSS
  • HTML
  • JAVA
  • PHP

tentang saya dan profesi saya

  1. About me
  2. Contact form
  3. Disclaimer
  4. Policy privacy
  5. TOS
Copy right