Tutorial CSS 7 menjelaskan Pengaturan Font di CSS. Bab ini mengajarkan Anda bagaimana untuk mengatur font dari konten yang tersedia dalam sebuah elemen HTML.
Tutorial CSS 7 menjelaskan Pengaturan Font di CSS. Bab ini mengajarkan Anda bagaimana untuk mengatur font dari konten yang tersedia dalam sebuah elemen HTML. Anda dapat mengatur berikut properti font dari elemen :
- Properti font-family digunakan untuk mengubah wajah font.
- Properti font-style digunakan untuk membuat miring huruf atau miring.
- Properti font-variant digunakan untuk menciptakan efek kecil-caps.
- Properti font-weight digunakan untuk meningkatkan atau menurunkan seberapa tebal atau menyalakan font muncul.
- Properti font-size digunakan untuk menambah atau mengurangi ukuran font.
- Properti font digunakan sebagai singkatan untuk menentukan jumlah properti font lainnya.
Pengaturan Font Family
Berikut adalah contoh yang menunjukkan bagaimana untuk mengatur family font elemen. Kemungkinan nilai bisa font family.
<html> <head> </head> <body> <p style="font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut -
Pengaturan Font Style
Berikut adalah contoh yang menunjukkan bagaimana untuk mengatur style font elemen. Nilai yang mungkin adalah normal, miring dan miring.
<html> <head> </head> <body> <p style="font-style:italic;"> This text will be rendered in italic style </p> </body> </html>
Akan menghasilkan :
Pengaturan Font Variant
Contoh berikut menunjukkan cara mengatur varian font elemen. Nilai yang mungkin adalah normal dan small-caps.
<html> <head> </head> <body> <p style="font-variant:small-caps;"> This text will be rendered as small caps </p> </body> </html>
Akan Menghasilkan :
Pengaturan Font Weight
Contoh berikut menunjukkan cara mengatur weight font elemen. Properti font-weight menyediakan fungsionalitas untuk menentukan bagaimana bold font. nilai-nilai yang mungkin bisa normal, tebal, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html> <head> </head> <body> <p style="font-weight:bold;">This font is bold.</p> <p style="font-weight:bolder;">This font is bolder.</p> <p style="font-weight:500;">This font is 500 weight.</p> </body> </html>
Akan menghasilkan :
Pengaturan Font Size
Contoh berikut menunjukkan cara mengatur ukuran font dari sebuah elemen. Properti font-size digunakan untuk mengontrol ukuran font. nilai-nilai yang mungkin bisa xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam pixel atau%.
<html> <head> </head> <body> <p style="font-size:20px;">This font size is 20 pixels</p> <p style="font-size:small;">This font size is small</p> <p style="font-size:large;">This font size is large</p> </body> </html>
Akan menghasilkan tampilan :
Mengatur Ukuran Font
Contoh berikut menunjukkan cara mengatur ukuran font menyesuaikan dari elemen. Properti ini memungkinkan Anda untuk menyesuaikan x-height untuk membuat font lebih mudah dibaca. Kemungkinan nilai bisa menjadi nomor apapun.
<html> <head> </head> <body> <p style="font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> </body> </html>
Akan Menghasilkan sebagai berikut :
Pengaturan Font Stretch
Contoh berikut menunjukkan cara mengatur stretch font elemen. Properti ini bergantung pada komputer pengguna untuk memiliki versi expanded atau condensed dari font yang digunakan.
nilai-nilai yang mungkin bisa normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html> <head> </head> <body> <p style="font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a condensed or expanded version of the font being used. </p> </body> </html>
Akan menghasilkan sebagai berikut :
Singkatan Properti
Anda dapat menggunakan properti font untuk mengatur semua properti font sekaligus. Misalnya :
<html> <head> </head> <body> <p style="font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once. </p> </body> </html>
Akan menghasilkan :
COMMENTS