Cara Menggunakan Property CSS font

Property font adalah properti singkatan untuk mengatur properti: font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family di tempat yang sama dalam stylesheet (CSS).

Jika salah satu properti tangan-panjang (longhand) di atas dihilangkan dari properti steno, maka nilai properti lama yang dihilangkan diatur ke nilai awal masing-masing. Nilai properti apa pun yang dinyatakan dalam properti font steno (bahkan jika nilai awalnya) menimpa nilai apa pun yang dinyatakan sebelum deklarasi properti steno.

Mengenai penyesuaian ukuran font: Definisi properti penyesuaian ukuran font memastikan bahwa properti tersebut kompatibel ke belakang (lihat entri properti untuk detailnya). Untuk menjaga kompatibilitas properti ini, tidak mungkin untuk mengaturnya di dalam steno font; alih-alih, Anda harus menggunakan properti individual.

Mengenai font-stretch: Karena properti font-stretch tidak didefinisikan dalam CSS 2.1, saat menggunakannya dalam font steno Anda juga harus menyertakan versi tambahan dari deklarasi font yang kompatibel dengan browser lama yang tidak mendukung font- properti melar. Sebagai contoh:

p {
  font: 80% sans-serif;             /* for older browsers */
  font: condensed 80% sans-serif;   /* includes `condensed` font-stretch value */
}

Menggunakan font untuk Mengatur Font Sistem

Properti font juga merupakan cara untuk mengatur font elemen ke font sistem, menggunakan kata kunci yang telah ditentukan.

Kata kunci yang digunakan untuk mengatur font sistem pada suatu elemen adalah: teks, ikon, menu, kotak pesan, teks kecil, dan bilah status.

Setiap kata kunci ini mewakili kategori font sistem. Menggunakan salah satu kata kunci ini akan mengatur font elemen ke font yang digunakan oleh sistem operasi untuk kategori tertentu. Sebagai contoh, font: menu akan menerapkan font yang sama ke elemen seperti font yang digunakan untuk menu di sistem operasi.

Font sistem hanya dapat diatur menggunakan properti font, dan tidak menggunakan properti font-family.

Selain itu, font sistem hanya dapat diatur secara keseluruhan; yaitu, keluarga font, ukuran, berat, gaya, dll. semuanya diatur pada waktu yang bersamaan. Nilai-nilai ini kemudian dapat diubah secara individual jika diinginkan. Jika tidak ada font dengan karakteristik yang ditunjukkan pada platform yang diberikan, browser harus secara cerdas mengganti (misalnya, versi yang lebih kecil dari font ‘caption’ dapat digunakan untuk font ‘caption kecil’), atau menggunakan browser-default font

.element {
    font: status-bar;
}

Kata kunci ini tidak untuk digunakan bersama dengan properti lain yang dapat diatur dalam properti steno font; mereka selalu digunakan sendiri dan mengatur deklarasi font secara keseluruhan. Jika Anda ingin mengubah ukuran font, berat, gaya, dll. Dari font sistem yang Anda pilih, Anda harus melakukan itu menggunakan masing-masing properti font, dan tidak di dalam properti font.

Perhatikan bahwa kata kunci yang digunakan untuk font sistem yang tercantum di atas hanya diperlakukan sebagai kata kunci ketika mereka terjadi di posisi awal, di posisi lain string yang sama diperlakukan sebagai bagian dari nama keluarga font:

font: menu;        /* use the font settings for system menus */
font: large menu;  /* use a font family named "menu" */

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published.