Sintaks Harta Fon-Keluarga
Reka bentuk tipografi adalah bahagian penting dari reka bentuk laman web yang berjaya. Mewujudkan laman web dengan teks yang mudah dibaca dan yang kelihatan hebat adalah matlamat setiap profesional reka bentuk web. Untuk mencapai matlamat ini, anda perlu menetapkan fon tertentu yang anda ingin gunakan pada halaman web anda. Untuk menentukan typeface atau keluarga font pada dokumen Web anda, anda akan menggunakan sifat gaya font keluarga di CSS anda.
Gaya keluarga font mudah yang boleh anda gunakan akan termasuk hanya satu keluarga font:
p {font-family: Arial; }Jika anda menggunakan gaya ini ke halaman, semua perenggan akan dipaparkan dalam keluarga font "Arial". Ini hebat dan sejak "Arial" adalah apa yang dikenali sebagai "web-safe font", yang bermaksud kebanyakan (jika tidak semua) komputer akan memasangnya, anda boleh berehat dengan mudah mengetahui bahawa halaman anda akan dipaparkan dalam font yang dimaksudkan .
Jadi apa yang berlaku jika fon yang anda pilih tidak dapat dijumpai? Sebagai contoh, jika anda tidak menggunakan "font selamat web" pada halaman, apakah ejen pengguna lakukan jika mereka tidak mempunyai font itu? Mereka membuat penggantian.
Ini boleh menyebabkan beberapa laman mencari yang sangat lucu. Saya pernah pergi ke halaman di mana komputer saya memaparkannya sepenuhnya dalam "Wingdings" (set ikon) kerana komputer saya tidak mempunyai fon yang telah ditentukan oleh pemaju, dan pelayar saya membuat pilihan yang sangat miskin dalam font apa yang akan gunakan sebagai pengganti. Halaman ini sama sekali tidak boleh dibaca untuk saya! Di sinilah tumpukan fon dimainkan.
Pisahkan Pelbagai Font Keluarga dengan Comma dalam Stack Font
"Stack font" adalah senarai fon yang anda mahu halaman anda digunakan. Anda akan meletakkan pilihan fon anda mengikut pilihan anda dan memisahkan masing-masing dengan koma. Jika penyemak imbas tidak mempunyai keluarga font pertama dalam senarai, ia akan mencuba yang kedua dan kemudian yang ketiga dan sebagainya sehingga ia mendapati satu yang ada pada sistem.
font-family: Pussycat, Algerian, Broadway;Dalam contoh di atas, penyemak imbas akan mula mencari fon "Pussycat", kemudian "Algeria" kemudian "Broadway" jika tiada fon lain yang dijumpai. Ini memberi anda lebih banyak peluang bahawa sekurang-kurangnya salah satu font pilihan anda akan digunakan. Ia tidak sempurna, itulah sebabnya kami mempunyai lebih banyak lagi yang boleh kami tambahkan pada stack font kami (baca!).
Gunakan Font Generik Terakhir
Jadi, anda boleh membuat tumpukan fon dengan senarai fon dan masih tidak ada yang boleh didapati oleh penyemak imbas. Anda jelas tidak mahu halaman anda dipaparkan tidak boleh dibaca jika penyemak imbas membuat pilihan penggantian yang tidak baik. Beruntung CSS mempunyai penyelesaian untuk ini juga: fon generik .
Anda harus selalu menamatkan senarai fon anda (walaupun ia satu senarai satu keluarga atau hanya fon selamat web) dengan fon generik. Terdapat lima yang boleh anda gunakan:
- kursif
- fantasi
- monospace
- sans-serif
- serif
Kedua-dua contoh di atas mungkin ditukar kepada:
font-family: Arial, sans-serif; font-family: Pussycat, Algerian, Broadway, fantasy;Beberapa Nama Keluarga Font adalah Dua atau Lebih Banyak Kata
Jika keluarga font yang anda ingin gunakan adalah lebih dari satu perkataan, maka anda harus mengelilinginya dengan tanda petikan ganda. Walaupun sesetengah penyemak imbas boleh membaca keluarga font tanpa tanda petikan, mungkin ada masalah jika ruang putih dipelam atau diabaikan.
font-family: "Times New Roman", serif;Dalam contoh ini, anda dapat melihat bahawa nama font "Times New Roman", yang berbilang perkataan, dibungkus dalam petikan. Ini memberitahu penyemak imbas bahawa ketiga-tiga perkataan ini adalah sebahagian daripada nama fon itu, berbanding dengan tiga fon yang berbeza semua dengan satu nama perkataan.
Artikel asal oleh Jennifer Krynin. Diedit pada 12/2/16 oleh Jeremy Girard