CSS Dasar Part 4 - Cara Menggunakan Font Styling Pada CSS

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 buat mengatur jenis font yang digunakan, nilai / value dari property ini terdapat dua, 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 model gambar dibawah ini. Artinya, sistem operasi user akan mencari dan mengecek, apakah value/nama font pertama ada, bila nir terdapat, maka sistem operasinya akan mencari value kedua dan seterusnya, bila tidak ada juga, maka sistem operasi user akan mencari value menurut generic family-nya.

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 berdasarkan property ini buat mengatur berukuran font. Value menurut properti ini berupa angka yang mempunyai satuan. Satuan menurut properti terdapat tiga yaitu px, %, & em. Dengan property font-size pada CSS ini, menaruh fleksibiltas buat memberikan berukuran font sebanyak apapun dibanding dengan memberikan style menggunakan memakai 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

font-style

fungsi dari property ini buat mengubah font sebagai bercetak miring. Value/nilai berdasarkan property ini ada tiga, 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

line-height

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

Dibawah ini adalah penerapan font styling dalam sintak CSS buat file HTML pada 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 buat 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

Shorthand CSS

Property Font Style Yang Wajib & Optional Dalam Penulisan Shorthand CSS

Untuk pembahasan tentang property CSS font, sekian dulu. Semoga sahabat-sahabat bisa memahami dan mengerti penerangan ini, apabila terdapat yang tidak kentara, sanggup ajukan pertanyaan dikolom komentar. Tetap semangat. See you on my next articles. Bye-bye....

Referensi:

https://www.W3schools.Com

https://www.W3schools.Com/css

http://www.W3.Org/style/CSS

https://developer.Mozilla.Org/en-US/docs/Web/CSS/Reference

http://css-tricks.Com/almanac