Saiz Font CSS: Panduan Sising Font Definitif

tetapan saiz fon CSS kelihatan mudah, tetapi ia mencabar untuk benar -benar beroperasi. Ramai pemaju bergantung kepada pelarasan berulang kepada atribut

untuk mencapai kesan visual, tetapi mendapati bahawa hasil penyebaran pelayar yang berbeza tidak konsisten. Pemahaman yang mendalam mengenai tetapan saiz fon CSS akan menghasilkan dua kali keputusan dengan separuh usaha. font-size

mata utama

CSS
• Properties menerima pelbagai parameter, termasuk nilai mutlak, relatif, dan panjang. Kecuali secara eksplisit ditindih, unsur -unsur mewarisi saiz fon elemen induk, yang penting dalam menentukan saiz relatif. font-size
Walaupun kata kunci saiz fon mutlak boleh digunakan, saiz tepat mereka boleh berbeza -beza di seluruh pelayar, jadi pemaju biasanya mengelakkan pendekatan kasar ini. Kata kunci saiz fon relatif menyesuaikan saiz fon mengikut saiz elemen induk. Anda boleh menetapkan saiz fon dengan nilai panjang mutlak, tetapi anda juga boleh menghadapi beberapa masalah, dan walaupun terdapat masalah akses yang berpotensi, nilai piksel masih paling sesuai.
Pemaju umumnya percaya bahawa dalam kebanyakan kes, menggunakan unit
• atau em adalah penyelesaian terbaik untuk menangani fon web, kerana mereka berskala dengan tepat antara satu sama lain dan menyokong saiz semula teks penyemak imbas. Adalah disyorkan untuk menggunakan saiz fon peratusan pada tag % untuk membuat saiz semula teks lebih baik pada pelayar yang lebih tua.

Properties font-size Atribut

boleh digunakan untuk sebarang tag HTML (walaupun ia biasanya tidak mengandungi kandungan teks, seperti font-size). Ia boleh menetapkan pelbagai parameter nilai mutlak, relatif, atau panjang. Unsur ini akan mewarisi elemen induk <br> kecuali anda mengatasinya. Ini amat penting apabila anda menentukan saiz relatif. font-size

kata kunci saiz font mutlak

Pelbagai kata kunci saiz fon mutlak boleh digunakan. Saiz fon ditentukan oleh pratetap penyemak imbas, dan elemen tidak akan mewarisi saiz elemen induk.

• font-size: xx-small;
• font-size: x-small;
• font-size: small;
• font-size: medium;
• font-size: large;
Walaupun kebanyakan penyemak imbas menyokong kata kunci ini, saiz yang tepat akan berbeza -beza. Mereka adalah cara yang agak kasar untuk menetapkan saiz fon, yang kebanyakan pemaju biasanya dielakkan.
• font-size: x-large;
Kata kunci saiz font relatif
• font-size: xx-large;
Dua kata kunci saiz fon relatif boleh digunakan. Saiz fon ditentukan berdasarkan saiz elemen induknya:

Sebagai contoh, jika saiz fon elemen induk adalah "sederhana", nilai "lebih besar" akan menetapkan elemen kepada "besar". Unit fon lain biasanya diselaraskan kepada pekali kira -kira 1.2, tetapi sekali lagi, tidak ada standard dan hasil penyemak imbas akan berbeza.

Panjang mutlak
• font-size: smaller;Atribut

  font-size boleh menetapkan panjang mutlak:

  • mm: mm, contohnya 10mm.
  • cm: cm, mis. 1cm
  • : inci, contohnya in (~ = 10mm). 0.39in
  • : pound, 1pt biasanya dianggap 1/72 inci, mis. pt 12pt
  : kad adalah 12pt untuk 1pc.
  • pc
  : piksel, contohnya
  • . px 14px
  Secara umum, terdapat masalah dengan semua unit pengukuran ini. Milimeter, sentimeter dan inci tidak tepat untuk media berasaskan skrin. Pound dan poker tidak boleh dipercayai kerana sistem boleh menggunakan tetapan DPI yang berbeza. Piksel nampaknya paling sesuai, tetapi ia boleh menyebabkan masalah kebolehcapaian kerana teks tidak boleh diubahsuai dalam IE.
  Panjang relatif

  Atribut

  boleh menetapkan unit relatif kepada saiz fon elemen induk mereka:

  font-size

  : 1EM adalah sama dengan saiz fon semasa, jadi 2EM adalah dua kali saiz.
  • em
  : 100% sama dengan saiz fon semasa, jadi 200% adalah dua kali saiz.
  • %
  : 1Ex adalah sama dengan ketinggian huruf "x" dalam font semasa.
  • ex
  Beberapa pemaju menggunakan "EX", tetapi ia boleh berguna dalam beberapa kes di mana saiz fon halus diperlukan, seperti 1EX bukan 0.525EM. Saiz peratusan dan
  bersamaan, seperti 50% = 0.5EM, 100% = 1EM, 120% = 1.2EM, dll. Sesetengah pelayar akan menunjukkan perbezaan yang halus, tetapi ini jarang menjadi isu utama. Jika anda ingin menyimpan setiap bait, anda boleh memilih definisi terpendek, iaitu 50% lebih pendek daripada 0.5EM dan 1EM lebih pendek daripada 100% lebih pendek.

  em

  saiz teks dan halaman zoom

  Ini adalah di mana kerumitan tambahan datang. Kebanyakan penyemak imbas membenarkan pengguna:

  Meningkatkan atau mengurangkan saiz teks asas (saiz imej tetap tidak berubah)
  1. zum masuk atau keluar dari halaman supaya semua teks dan grafik berubah dengan sewajarnya, atau
  2. Juga membenarkan saiz semula teks dan skala halaman.
  Untuk merumitkan lagi perkara, Internet Explorer tidak membenarkan elemen saiz semula teks yang saiz fonnya ditakrifkan dalam piksel (px).

  Jika anda seorang pemaju yang telah berpindah dari latar belakang tipografi ke reka bentuk web, ia mengganggu untuk memberi pengguna banyak kuasa. Reka bentuk anda boleh dipecahkan oleh pembesaran pengguna sebanyak 200% tetapi mengurangkan saiz teks kepada 50%. Dan - tidak - anda tidak boleh menghentikannya. Anda tidak boleh menghentikannya sama ada.

  cadangan saiz fon CSS

  Secara umumnya dipercayai bahawa dalam kebanyakan kes,

  atau

  adalah penyelesaian terbaik. Fon Web boleh ditingkatkan dengan tepat antara satu sama lain dan menyokong saiz semula teks penyemak imbas. Saya juga mengesyorkan menggunakan saiz fon peratusan pada tag em ini akan menghasilkan saiz semula teks yang lebih baik dalam beberapa pelayar yang lebih tua. Semasa membangunkan laman web, saya juga mengesyorkan agar anda membuat cadangan berikut: %

  1. saiz fon reset dan penskalaan halaman ke nilai lalai dalam semua pelayar sebelum ujian (ia menangkap saya dari penjaga beberapa kali!)
  2. Cuba gunakan saiz teks yang munasabah dan kombinasi skala halaman dalam pelbagai pelayar untuk memastikan teks tetap boleh dibaca.

  Adakah saiz fon pernah menyebabkan masalah anda? Adakah anda mempunyai petua lain?

  Soalan Lazim Saiz Font CSS (Soalan Lazim)

  Apakah perbezaan antara saiz fon mutlak dan saiz fon relatif dalam CSS?

  Dalam CSS, saiz fon boleh ditetapkan menggunakan nilai mutlak atau relatif. Nilai mutlak ditetapkan dan tidak akan berubah mengikut saiz elemen induk. Mereka ditakrifkan dalam unit seperti piksel (px), pound (pt), atau sentimeter (cm). Sebaliknya, nilai relatif dinamik dan akan berubah mengikut saiz elemen induk. Mereka ditakrifkan menggunakan unit seperti EM, REM, atau peratusan (%). Pilihan saiz fon mutlak dan saiz fon relatif bergantung kepada keperluan reka bentuk dan respons respons laman web.

  Bagaimana unit EM berfungsi dalam saiz fon CSS?

  unit EM adalah unit berskala yang digunakan untuk saiz fon dalam CSS. Ia mempunyai saiz fon berbanding dengan elemen induk terdekatnya. Sebagai contoh, jika saiz fon elemen induk adalah 20px, "1EM" akan sama dengan 20px untuk elemen kanak -kanak elemen itu. Jika saiz fon tidak ditakrifkan, nilai lalai biasanya 16px, jadi "1EM" akan menjadi 16px.

  Bagaimana menggunakan unit REM untuk menetapkan saiz fon?

  Unit REM mewakili "Root EM". Ia adalah relatif kepada elemen akar (HTML) dan bukannya elemen induk. Ini bermakna 1REM adalah sama dengan saiz fon elemen akar. Jika saiz fon elemen akar adalah 16px (saiz lalai untuk kebanyakan penyemak imbas), 1REM akan sama dengan 16px.

  Apakah unit VW dalam saiz fon CSS?

  unit VW mewakili lebar viewport. Ia adalah relatif kepada lebar viewport, di mana 1VW adalah sama dengan 1% daripada lebar viewport. Unit ini membolehkan saiz fon diselaraskan mengikut lebar skrin, menjadikannya alat yang sangat baik untuk reka bentuk responsif.

  bagaimana membuat saiz fon saya responsif menggunakan CSS?

  Untuk membuat saiz fon anda responsif, anda boleh menggunakan unit relatif seperti EM, REM, atau VW. Unit -unit ini menyesuaikan saiz fon mengikut saiz elemen induk, saiz elemen akar, atau lebar viewport. Ini membolehkan saiz fon berubah secara dinamik berdasarkan saiz skrin atau saiz elemen induk.

  Bagaimanakah fungsi

  dalam saiz fon CSS berfungsi? calc() Fungsi

  dalam

  dalam CSS membolehkan anda melakukan pengiraan untuk menentukan saiz fon. Ia boleh digunakan dengan unit yang berbeza, menjadikannya alat yang berkuasa untuk membuat reka bentuk responsif. Sebagai contoh, anda boleh menetapkan saiz fon menggunakan calc() yang merupakan campuran nilai piksel tetap dan nilai viewport relatif. calc() Apakah kesan atribut

  dalam

  dalam CSS? font-size-adjust Atribut

  dalam

  dalam CSS membolehkan anda menyesuaikan ketinggian X fon (ketinggian huruf kecil). Ini berguna apabila anda menggunakan fon alternatif kerana ia memastikan bahawa ketinggian x dikekalkan, dan kebolehbacaan itu konsisten tidak kira fon mana yang digunakan. font-size-adjust

  Bagaimana menggunakan unit CH dalam saiz fon CSS?

  Lebar unit CH dalam CSS berbanding dengan fon "0" (sifar) lebar fon yang digunakan. Unit ini berguna apabila anda ingin menetapkan lebar elemen berdasarkan aksara yang terkandung di dalamnya, seperti menetapkan lebar butang berdasarkan panjang teks dalaman.

  Apakah unit LH dalam saiz fon CSS?

  unit LH mewakili "ketinggian naik". Ketinggian barisnya berbanding dengan elemen. Unit ini berguna apabila anda ingin menetapkan ketinggian elemen berdasarkan ketinggian baris, seperti membuat irama menegak dalam reka bentuk anda.

  Bagaimana menggunakan unit ex dalam saiz fon CSS?

  unit ex dalam css berbanding dengan ketinggian x font semasa. Ketinggian x biasanya ketinggian huruf kecil (seperti "x"). Unit ini berguna apabila anda ingin menetapkan ketinggian elemen berdasarkan ketinggian x, seperti elemen menjajarkan secara menegak berdasarkan teks dalaman.

Atas ialah kandungan terperinci Saiz Font CSS: Panduan Sising Font Definitif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!