CSS Font

CSS properti untuk font digunakan untuk menentukan font familly, bold , size , dan style text.



Perbedaan Antara Font Serif dan Sans - serif

Font Sans - serif dianggap lebih mudah untuk dibaca daripada font serif.



CSS Font Familly

Pada CSS  terdapat dua jenis nama keluarga font :

  • generic familly - sebuah kelompok font dengan tampilan yang sama ( seperti " Serif " atau " Monospace " )
  • font familly - keluarga font tertentu ( seperti " Times New Roman " atau " Arial " )
Generic familyFont familyDescription
SerifTimes New Roman
Georgia
Serif fonts memiliki garis kecil di ujung pada beberapa karakter
Sans-serifArial
Verdana
"Sans" berarti font ini tanpa tidak memiliki garis-garis pada ujung karakter
MonospaceCourier New
Lucida Console
Semua monospace memiliki lebar yang sama

Font Family

Teks font familly dibuat dengan properti font-family. Mulailah dengan font yang anda inginkan , dan diakhiri dengan sebuah generic familly, agar browser memilih font yang sama dalam font generik , jika tidak ada font lain yang tersedia .

Catatan: Jika nama keluarga font yang lebih dari satu kata , itu harus dalam tanda kutip , seperti font-family : " Times New Roman". Lebih dari satu keluarga font yang ditentukan dalam daftar dipisahkan koma :

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

Style Font

Properti font-style banyak digunakan untuk menentukan teks miring.
Properti ini memiliki tiga nilai :
  • normal - Teks ditampilkan biasanya
  • italic - Teks ditampilkan dalam huruf miring
  • oblique- teks ini "condong" ( miring, sangat mirip, tapi kurang didukung oleh browser) 

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


Font Size

Properti font-size digunakan untuk mengatur ukuran teks .

Mampu mengatur ukuran teks adalah penting dalam desain web . Namun, anda tidak harus menggunakan penyesuaian ukuran font untuk membuat paragraf terlihat seperti pos, atau pos tampak seperti paragraf. Selalu gunakan tag HTML yang tepat , seperti <h1> - <h6> untuk judul dan <p> untuk paragraf .

Nilai font-size dapat menjadi ukuran absolut , atau relatif.

Ukuran absolut :
  • Mengatur teks ke ukuran tertentu
  • Tidak memungkinkan pengguna untuk mengubah ukuran teks dalam semua browser ( buruk karena alasan aksesibilitas )
  • Ukuran Mutlak berguna ketika ukuran fisik dari output diketahui
Ukuran relatif :
  • Mengatur ukuran relatif terhadap elemen sekitarnya
  • Memungkinkan pengguna untuk mengubah ukuran teks dalam browser
  • Ucapan Jika Anda tidak menentukan ukuran font, ukuran standar untuk teks biasa , seperti paragraf , adalah 16px ( 16px = 1em ) .

Mengatur Ukuran Font Dengan Pixel
Mengatur ukuran teks dengan piksel , memberi Anda kontrol penuh atas ukuran teks:
 
h1 { font-size : 40px ; }
h2 { font-size : 30px ; }
p { font-size : 14px ; }
Contoh di atas memungkinkan Firefox , Chrome , dan Safari untuk mengubah ukuran teks , tapi tidak Internet Explorer .
Teks dapat diubah ukurannya di semua browser menggunakan zoom tool ( Namun , ini mengubah ukuran seluruh halaman , tidak hanya teks ).


Mengatur Ukuran Font Dengan Em

Untuk menghindari masalah Resize dengan Internet Explorer , banyak pengembang menggunakan em bukan piksel. Unit ukuran em direkomendasikan oleh W3C. 1em sama dengan ukuran font saat ini. Ukuran teks default di browser adalah 16px . Jadi , ukuran default 1em adalah 16px .

Ukuran dapat dihitung dari piksel ke em menggunakan rumus ini : pixels/16 = em

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 * /
Contoh di atas , ukuran teks dalam em adalah sama dengan contoh sebelumnya dalam pixel . Namun, dengan ukuran em , dan ini memungkin untuk menyesuaikan ukuran teks dalam semua browser .

Sayangnya , masih ada masalah dengan IE . Ketika mengubah ukuran teks , menjadi lebih besar dari yang seharusnya ketika dibuat lebih besar , dan lebih kecil dari yang seharusnya ketika dibuat lebih kecil.


Gunakan Kombinasi Persen dan Em

Solusi yang bekerja di semua browser , adalah untuk mengatur font -size default di persen untuk elemen body :

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

 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda