Apakah CSS property untuk mengatur ukuran huruf karakter?

Properti font-family harus ditetapkan beberapa nama font sebagai mekanisme "fallback", jika browser tidak mendukung font pertama, ia akan mencoba font berikutnya.

Catatan: Jika nama keluarga font yang lebih dari satu kata, itu harus tertutup dalam tanda kutip, seperti Font Family: "Times New Roman."

keluarga font yang beberapa ditentukan oleh dipisahkan koma:

contoh

p{font-family:"Times New Roman", Times, serif;}

Untuk kombinasi font yang lebih umum digunakan, melihat kami Web-aman kombinasi font .

gaya font

Terutama atribut menentukan gaya font teks miring.

Properti ini memiliki tiga nilai:

• Biasa - tampilan teks normal
• Miring - teks yang ditampilkan dalam huruf miring
• karakter miring - satu sisi cenderung untuk teks (dan sangat mirip dengan miring, tapi kurang didukung)

contoh

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Font Size

Ukuran properti font-ukuran teks.

Dapat mengatur ukuran teks dalam desain web sangat penting. Namun, Anda tidak dapat menyesuaikan ukuran font untuk membuat paragraf terlihat seperti pos, atau membuat judul terlihat seperti paragraf.

Pastikan untuk menggunakan tag yang benar HTML untuk

mewakili sebuah paragraf:

Font nilai ukuran bisa ukuran absolut atau relatif.

ukuran absolut:

• Mengatur teks dari ukuran tertentu
• Kita tidak bisa mengubah ukuran teks dalam semua browser
• Tentukan ukuran fisik output dari ukuran absolut dari berguna

ukuran relatif:

• Sehubungan dengan elemen sekitarnya untuk mengatur ukuran
• Hal ini memungkinkan pengguna untuk mengubah ukuran teks dalam browser Anda

Mengatur ukuran font pixel

Mengatur ukuran teks dengan piksel, memberi Anda kontrol penuh atas ukuran teks:

contoh

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

Contoh di atas 9, Firefox, Chrome, Opera, dan Safari, menyesuaikan ukuran teks dengan skala browser Internet Explorer.

Meskipun Anda dapat menyesuaikan ukuran teks melalui alat zoom browser, bagaimanapun, penyesuaian ini adalah seluruh halaman, tidak hanya teks

Gunakan em untuk mengatur ukuran font

Untuk menghindari Internet Explorer tidak dapat disesuaikan dalam teks, banyak pengembang menggunakan em unit bukan piksel.

Unit em-size direkomendasikan oleh W3C.

1em sama dengan ukuran font saat ini. Dalam browser default ukuran teks adalah 16px.

Oleh karena itu, ukuran default dari 1em 16px. Rumus berikut dapat dikonversi ke piksel em: px / 16 = em

contoh

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Dalam contoh di atas, ukuran em teks adalah sama dengan contoh sebelumnya dalam pixel. Namun, jika Anda menggunakan unit em, Anda dapat menyesuaikan ukuran teks dalam semua browser.

Sayangnya, IE masih masalah browser. Mengubah ukuran teks, itu akan lebih kecil dari normal atau lebih besar ukurannya.

Gunakan kombinasi persentase dan EM

Dalam semua solusi browser, mengatur unsur ukuran font default adalah persentase:

contoh

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

kode kita sangat efektif. Dalam semua browser dapat menampilkan ukuran teks yang sama, dan memungkinkan semua browser untuk memperbesar ukuran teks.

Halo Sob! setelah kalian mempelajari bagaimana Perbedaan Antara Inline, External, dan Internal di CSS ,dalam postingan sebelumnya. Artikel yang admin buat kali ini akan menjelaskan bagaimana Cara Menggunakan Font Styling Di CSS. Oke langsung saja kita ke pembahasannya Cekidot!

Font Style atau Font Styling mempunyai arti yaitu gaya tulisan atau penataan tulisan. Menurut w3schools font CSS merupakan sebuah properti yang menentukan gaya font untuk sebuah teks. biasanya properti yang digunakan yaitu untuk mengatur jenis, ukuran, ketebalan, dan kemiringan suatu tulisan. Font sangat berguna sekali, misalnya dalam sebuah website/blog yang memiliki tampilan yang indah tetapi ukuran tulisan yang digunakan terlalu kecil atau terlalu berdekatan, itu akan menyulitkan pembaca. Untuk itu kita harus bisa menyesuaikan font yang digunakan agar sesuai untuk di baca dan dengan ukuran yang sesuai pula. Supaya pembaca nyaman membaca di website/blog kalian. Berikut jenis-jenis font standar yang sering digunakan di CSS.

DAFTAR ISI

Jenis Font Standar CSS

1. Font Serif

Font serif adalah font yang memiliki kaki pada setiap ujung hurufnya, font ini akan membuat lebih mudah terbaca pada media cetak. Biasanya font ini digunakan pada media cetak misalnya kertas karena akan terkesan rapi dan mudah dibaca. Contoh font serif yaitu: Times New Roman, Georgia, Lucida Bright, dan Lucida Fax.

2. Font Sans-serif

Font sans-serif merupakan font kebalikan dari serif, font sans-serif adalah font yang tidak memiliki kaki pada setiap ujung hurufnya. Font jenis ini akan mudah dibaca dalam media elektronik seperti web, misalnya seperti website. Contoh font sans-serif yaitu: Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri.

3. Font Monospace

Font monospace merupakan font yang lebar setiap karakternya sama panajang. Contohnya pada font monospace akan mengambil sama panjang antara huruf “i” dengan huruf “W“. Jika dibandingkan dengan font reguler huruf “W” akan mengambil tempat yang lebih panjang jika dibandingkan huruf “i“. Biasanya font ini digunakan untuk urusan yang bersifat teknis, misalnya seperti menulis kode program. Contoh font monospace yaitu: Andale Mono, Courier, dan Courier New.

4. Font Cursive

Font cursive adalah font yang meniru tulisan kaligrafi atau tulisan tangan. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu formal. Contoh font cursive yaitu: Comic Sans, dan Snell.

5. Font Fantasy

Font fantasy adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dan lain-lain. Font jenis ini biasanya jarang digunakan pada tulisan utama, namun biasanya digunakan pada bagian tulisan yang butuh perhatian khusus, misalnya pada tittle. Contoh font fantasy yaitu: Impact, Luminari, Trattatello, Marker Felt, dan Chalkduster.

Sytax CSS Untuk Merubah Font

• font-size: digunakan untuk mengatur ukuran font.
• font-weight: digunakan untuk mengatur ketebalan font.
• font-family:  digunakan untuk mengubah jenis font.
• font-style:  digunakan untuk memberikan gaya pada font.
• font-color: digunakan untuk merubah warna font.
• caption: digunakan untuk merubah caption (seperti tombol, drop-down, dll.)
• icon: digunakan untuk merubah font label ikon
• menu: digunakan untuk merubah font menu dropdown
• message-box: digunakan untuk merubah font  kotak dialog
• small-caption: digunakan untuk caption tetapi versi lebih kecilnya
• status-bar: digunakan untuk font status bar
• initial: digunakan untuk mengatur properti ke nilai standarnya. Baca tentang
• inherit: digunakan untuk mewarisi properti dari elemen induknya

Contoh Penggunaan Font Di CSS

<!DOCTYPE html> 
<html>
  <head>
    <title>Contoh Penggunaan Font Di CSS</title>
    <style type="text/css"> .size{ font-size: 15px; } .weight{ font-weight: bold; } .family{ font-family: sans-serif; } .style{ font-style: italic; } </style>
  </head>
  <body>
    <p class="size">Contoh Font Size</p>
    <p class="weight">Contoh Font Weight</p>
    <p class="family">Contoh Font Family</p>
    <p class="style">Contoh Font Style</p>
    <p style="color: blue;">Contoh Font Color</p>
    <p style="font:caption">Contoh Font Caption</p>
    <p style="font:icon">Contoh Font Icon</p>
    <p style="font:menu">Contoh Font Menu</p>
    <p style="font:message-box">Contoh Font Message Box</p>
    <p style="font:small-caption">Contoh Font Small Caption</p>
    <p style="font:status-bar">Contoh Font Status Bar</p>
    <p style="font:initial;">Contoh Font Initial</p>
    <p style="font:inherit;">Contoh Font Inherit</p>
  </body>
</html>

Hasilnya:

Cara Mengatur Sebuah Font Di CSS

Penggunaan Font di CSS yaitu merubah jenis font menggunakan CSS. Kalian bisa menggunakan property font-family dan kalian isi dengan value nama font yang diinginkan. Value nama font bisa berisi lebih dari satu, misalnya font-family: “Times New Roman”, Times, serif;. Untuk Times New Roman dan Times merupakan nama font, dan serif merupakan jenis generik font. Dari ketiga value diatas maka web browser akan mencari font Times New Roman terlebih dahulu pada komputer, jika font Times New Roman tidak tersedia web browser akan mencari font Times pada komputer, dan jika font Times tidak ada maka web browser akan mencari jenis font generik serif yang hampir setiap komputer memiliki font tersebut, dan juga ada 3 aturan dalam penulisan nama font atau value pada property font-family di CSS diantaranya:

• Untuk memisahkan antara nama font satu dengan nama font lainnya diberi tanda koma.
• Untuk penulisan nama font harus diawali dengan huruf besar, misalnya Times, Georhia. Tetapu aturan ini tidak berlaku saat menulis nama generik font, misalnya sans, sans-serif.
• Jika nama font memiliki spasi maka penulisannya harus diapit dengan tanda kutip, misalnya “Times New Roman”.

<html>
  <head>
    <title>Cara Mengatur Sebuah Font Di CSS</title>
    <style> .font1{font-family: "Times New Roman", Times, serif;} .font2{font-family: Arial, Helvetica, sans-serif;} </style>
  </head>
  <body>
    <h1 class="font1">Contoh Font 1</h1>
    <h1 class="font2">Contoh Font 2</h1>
  </body>
</html>

Hasilnya:

Pada Contoh kode diatas terdapat dua buah heading yang memiliki nama class yang berbeda yaitu font1 dan font2. Nama class itulah yang digunakan untuk selector pada CSS. Pada selector class CSS bernama font1 yang memiliki property dan value font-family: “Times New Roman”, Times, serif; berarti akan merubah font atau tulisan yang ada di heading menjadi Times New Roman, apabila pada komputer tidak memiliki font tersebut maka akan menggunakan font selanjutnya yaitu Times, apabila font Times juga tidak ada maka akan menggunakan jenis font generik serif yang hampir setiap komputer memiliki jenis font tersebut. Sedangkan untuk selector class font2 penjelasannya sama dengan selector class font1. Jadi web browser akan selalu mencari nama font dari paling awal terlebih dahulu.

Kesimpulan

Jadi dalam penggunaan font styling di CSS itu terdapat jenis-jenis font standar seperti: Font Serif, Font Sans-serif, Font Monospace, Font Cursive, dan Font Fantasy. CSS juga memberikan syntax untuk merubah sebuah font agar lebih mudah seperti font-size, font-weight, font-family, font-style, font-color, dan lain sebaginya. Dan juga dalam penggunaan font styling di CSS terdapat aturan-aturan yang harus dipatuhi, agar font dapat bekerja dengan baik.

Sekian artikel Cara Menggunakan Font Styling Di CSS. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke teman-teman kalian. Terimakasih…

Apakah CSS property untuk mengatur ukuran huruf?

CSS properti apa yang digunakan untuk menentukan ukuran teks?

Apa kegunaan properti font

Apa arti dari property font style CSS?