Skip to content Skip to sidebar Skip to footer
Home / css / css-dasar / web-design

CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS

Posted by Eren Rere Post a Comment
CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS - Font adalah bagian dari sebuah text. walaupun font adalah bagian dari text. namun di CSS property font terpisah atau berbeda dengan property text. font adalah salah satu property penting dalam CSS yang terkait dengan tulisan/ type face-nya. sedangkan property text terkait dengan property pendukungnya. Untuk font dalam CSS memiliki beberapa property

property css yang bisa digunakan untuk font styling adalah font style, font variant, font weight, font size, line height, font family
Property Font Styling


HTML Yang Akan Diberi Property Font:

<!DOCTYPE html>
<html>
<head>
    
    <title>Font CSS</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit harum provident debitis nobis libero doloribus in id fugit saepe quia blanditiis ipsa, vero adipisci dolore explicabo, vel soluta vitae officiis.</p>
</body>
</html>


Property Untuk Font Styling Pada CSS :

font-family
fungsi dari property ini untuk mengatur jenis font yang digunakan, nilai / value dari property ini ada 2, yaitu :

  • Font name : arial, times new roman, tahoma, georgia, verdana, calibri, impact, dll.
  • Generic family : san-serif, serif, dll.

Font-family bisa memiliki beberapa value, seperti contoh gambar dibawah ini. Artinya, sistem operasi user akan mencari dan mengecek, apakah value/nama font pertama ada, apabila tidak ada, maka sistem operasinya akan mencari value kedua dan seterusnya, apabila tidak ada juga, maka sistem operasi user akan mencari value dari generic family-nya.

Font Family untuk mengatur jenis font pada css
Font Family

Perbedaan antara generic family serif dan sans-serif adalah serif memiliki kaki difontnya sedangkan sans-serif tidak memiliki kaki
Perbedaan antara San-Serif dan Serif

font-size
fungsi dari property ini untuk mengatur ukuran font. value dari properti ini berupa angka yang memiliki satuan. Satuan dari properti ada 3 yaitu px, %, dan em. Dengan property font-size di CSS ini, memberikan fleksibiltas untuk memberikan ukuran font sebesar apapun dibanding dengan memberikan style dengan menggunakan HTML.

font-weight
fungsi dari property ini untuk mengatur ketebalan font. property font-weight ini memiliki beberapa value/nilai sebagai berikut :


  • Lighter : value/nilai dari property ini untuk membuat font menjadi lebih kurus/ramping.
  • Normal : value/nilai dari property ini untuk membuat font yang memilki default bold, seperti heading, menjadi font normal.
  • 100-900 : value/nilai dari property ini membuat font menjadi lebih tebal, namun value nya direpresentasikan dari angka 100-900, semakin mendekati 900, maka font nya akan menjadi lebih tebal
  • Bold : value/nilai dari property ini membuat tulisan menjadi bold/tebal. Untuk nilai bold tidak bisa diterapkan apa elemen HTML heading ( h1 – h6), karena secara default, untuk elemen tersebut memang sudah bold.
  • Bolder : value/nilai dari property ini membuat tulisan lebih tebal dari default nilai bold yang ada.


font-variant
fungsi dari property ini untuk mengatur font menjadi small-caps. Value/nilai dari font-variant ini ada 2 jenis, yaitu

  • normal : value ini membuat tulisan menjadi normal.
  • small-caps : value ini akan membuat sebuah text menjadi huruf besar semua, apabila sebuah sudah menajadi huruf besar, maka huruf tersebut akan menjadi lebih besar dari sebelumnya dan tentunya lebih besar dari huruf yang lain.
font variant pada font styling css untuk membuat tulisan menjadi normal dan atau huruf besar semua
Font Variant 


font-style
fungsi dari property ini untuk mengubah font menjadi bercetak miring. Value/nilai dari property ini ada 3, yaitu :

  • normal : value/nilai dari property ini membuat font yang memiliki default italic, menjadi normal.
  • italic : value/nilai dari property ini membuat font menjadi miring, namun untuk proses ini, bisa dilakukan jika font yang diberi style italic, memang dalam keluarga font tersebut memilki font jenis italic.apabila punya jenis font italic, maka proses italic yang terjadi adalah mengganti font normal menjadi font italicnya, apabila tidak memiliki jenis font italic, maka yang terjadi dibuat menjadi oblique atau dipaksa miring.
  • oblique : value/nilai dari property ini membuat font menjadi miring beberapa derajat kemiringan, dengan cara dipaksa oleh sistem operasi, karena font yang diberi style, dalam keluarga fontnya tidak memiliki font jenis italic.


font style pada font styling css untuk membuat tulisan menjadi miring
Font Style

line-height
fungsi property ini untuk mengatur spasi antar baris, property line-height memilki value/nilai berupa angka yang memilki satuan. Satuannya bisa berupa px, %, atau em.

Dibawah ini adalah penerapan font styling pada sintak CSS untuk file HTML di atas :


h1 {



font-family: : impact, arial, sans-serif;

font-size: 100px;


font-family: verdana, georgia, serif;

font-variant: small-caps;
}
p {


font-style: italic;

font-weight: bold;
    font-size: 40px;


}

line-height: 50px;

cara memberikan style css pada html dan menampilkannya di web browser
Cara Memberikan CSS Font Style Pada HTML

Shorthand/Singkatan untuk CSS Font :

Untuk efisiensi penulisan pada halaman CSS, property font bisa ditulis secara singkat. Namun penulisan dari shorthand CSS font ini, harus sesuai urutan dari mulai font-style, font-variant, font-weight, font-size, line-height, dan urutan terakhir font-family.

cara menuliskan urutan shorhand css atau bagaimana cara menyingkatnya
Urutan Penulisan Shorthand CSS

cara menuliskan urutan shorhand css atau bagaimana cara menyingkatnya
Shorthand CSS

Property Font Style Yang Wajib dan Optional Dalam Penulisan Shorthand CSS
Property Font Style Yang Wajib dan Optional Dalam Penulisan Shorthand CSS

Untuk pembahasan mengenai property CSS font, sekian dulu. Semoga teman-teman bisa memahami dan mengerti penjelasan ini, apabila ada yang tidak jelas, bisa ajukan pertanyaan dikolom komentar. Tetap semangat. See you on my next articles. Bye-bye....


Referensi:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://css-tricks.com/almanac


  • kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik 
    pembahasan.
  • the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Post a Comment for "CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS"

Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan