Fon - Trik CSS | CSS Almanac 2025

The fontharta di CSS adalah sebuah singkatan yang menggabungkan semua yang berikut sub-hotel di deklarasi tunggal.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Terdapat tujuh fontsub-sifat, termasuk:

font-stretch: sifat ini menetapkan lebar fon, seperti kental atau diperluas.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: menjadikan teks kelihatan miring atau serong.
- normal
- italic
- oblique
- inherit
font-variant: menukar teks sasaran menjadi huruf kecil.
- normal
- small-caps
- inherit
font-weight: menetapkan berat atau ketebalan fon.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: menetapkan ketinggian fon.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: mentakrifkan jumlah ruang di atas dan di bawah elemen sebaris.
- normal
- number (font-size multiplier)
- percentage
font-family: menentukan fon yang diterapkan pada elemen.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font Shorthand Gotchas

The fontharta tidak semudah hartanah trengkas lain, sebahagiannya disebabkan oleh keperluan sintaks untuk itu, dan sebahagiannya disebabkan oleh isu-isu warisan.

Berikut adalah ringkasan beberapa perkara yang harus anda ketahui semasa menggunakan harta tanah ini.

Nilai Wajib

Dua nilai dalam fontsingkatan adalah wajib: font-sizedan font-family. Sekiranya salah satu daripada ini tidak disertakan, keseluruhan deklarasi akan diabaikan.

Juga, font-familymesti dinyatakan terakhir dari semua nilai, jika tidak, sekali lagi, keseluruhan pengisytiharan akan diabaikan.

Nilai Pilihan

Kesemua lima nilai lain adalah pilihan. Jika anda termasuk mana-mana font-style, font-variantdan font-weight, mereka mesti datang sebelum font-sizedalam perisytiharan itu. Sekiranya tidak, mereka akan diabaikan dan juga boleh menyebabkan nilai wajib diabaikan.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Dalam contoh di atas, tiga pilihan disertakan. Selama ini ditentukan sebelumnya font-size, mereka boleh diletakkan mengikut urutan apa pun.

Termasuk line-heightjuga adalah pilihan tetapi boleh diisytiharkan hanya selepas font-sizedan hanya setelah garis miring ke depan:

body ( font: 44px/20px Georgia, sans-serif; )

Dalam contoh di atas, line-heightadalah "20px". Sekiranya anda menghilangkan line-height, anda juga mesti menghilangkan garis miring, jika tidak, keseluruhan baris akan diabaikan.

Menggunakan peregangan fon

The font-stretchharta yang baru dalam CSS3 jadi jika ia digunakan dalam pelayar yang lebih tua yang tidak menyokong font-stretchdalam fonttrengkas, ia akan menyebabkan seluruh barisan untuk diabaikan.

Spesifikasi mengesyorkan memasukkan fallback tanpa font-stretch, seperti ini:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Warisan untuk pilihan

Sekiranya anda menghilangkan mana-mana nilai optianal (termasuk line-height), pilihan yang dihilangkan tidak akan mewarisi nilai dari elemen induknya, seperti yang sering berlaku pada sifat tipografi. Sebaliknya, mereka akan diset semula ke keadaan awal.

Sebagai contoh:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Dalam kes ini, nilai pilihan (miring, huruf kecil, dan tebal) diletakkan pada fontdeklarasi pada elemen. Ini juga akan berlaku untuk kebanyakan elemen kanak-kanak.

Namun, kerana kami telah mendeklarasikan semula fontproperti pada elemen perenggan, semua pilihan akan diset semula pada perenggan, menyebabkan gaya, varian, berat, dan tinggi baris kembali ke nilai awalnya.

Kata kunci untuk Menentukan Fon Sistem

Sebagai tambahan kepada sintaks di atas, sifat fontini juga membenarkan penggunaan kata kunci sebagai nilai. Mereka adalah:

caption
icon
menu
message-box
small-caption
status-bar

Nilai kata kunci ini menetapkan fon ke fon yang digunakan pada sistem operasi pengguna untuk kategori tertentu. Sebagai contoh, mendefinisikan "caption" akan menetapkan font pada elemen tersebut untuk menggunakan font yang sama yang digunakan pada sistem operasi untuk kontrol captioned (butang, drop-down, dll).

Kata kunci tunggal merangkumi keseluruhan nilai:

body ( font: menu; )

Properti lain yang disebutkan sebelumnya tidak sah bersama dengan kata kunci ini. Kata kunci ini hanya dapat digunakan dengan fontsingkatan dan tidak dapat dinyatakan menggunakan salah satu sifat longhand individu.