Tingkatkan tipografi web dengan saiz fon CSS menyesuaikan

CSS

Atribut: Alat yang berkuasa untuk meningkatkan kebolehbacaan laman web menaip font-size-adjust Atribut CSS CSS membolehkan pemaju menentukan saiz fon berdasarkan ketinggian huruf kecil dan bukannya ketinggian huruf besar, dengan itu meningkatkan kebolehbacaan teks web, terutamanya apabila menggunakan fon alternatif.

Artikel ini akan meneroka secara mendalam tentang kepentingan atribut

dan penggunaannya yang betul dalam projek. font-size-adjust Kepentingan

font-size-adjust

Kebanyakan laman web terutamanya terdiri daripada teks. Oleh kerana teks penting dalam laman web, amat perlu untuk memberi perhatian khusus kepada fon yang digunakan. Memilih fon yang betul boleh membawa pengalaman membaca yang menyenangkan, jika tidak, ia boleh membuat laman web sukar dibaca. Selepas menentukan fon, anda biasanya perlu memilih saiz fon yang sesuai.

font-size-adjust Properties Tetapkan saiz fon semua siri font di laman web. Walau bagaimanapun, ia sering dipilih untuk keluarga font pilihan. Masalahnya timbul apabila fon pilihan tidak tersedia atas sebab tertentu, penyemak imbas menggunakan salah satu fon alternatif yang disenaraikan dalam dokumen CSS untuk memberikan teks.

Sebagai contoh, memandangkan peraturan CSS berikut:

Jika penyemak imbas tidak dapat memuat turun "lato" dari font Google, font alternatif seterusnya, Verdana, akan digunakan sebaliknya. Walau bagaimanapun, nilai font-size kemungkinan besar dipilih dengan pertimbangan "lato" dan bukannya Verdana.

Nisbah aspek fon web

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

Untuk nilai saiz fon malar, saiz visual fon dan kebolehbacaannya mungkin berbeza -beza. Hal ini terutama berlaku untuk teks -teks seperti Latin yang sensitif kes. Dalam kes ini, nisbah ketinggian huruf kecil ke ketinggian huruf besarnya adalah faktor penting dalam menentukan kebolehbacaan fon. Nisbah ini sering dipanggil nisbah aspek fon.

font-size Seperti yang dinyatakan sebelum ini, apabila nilai

ditetapkan, ia akan tetap sama untuk semua keluarga fon. Walau bagaimanapun, jika nisbah aspek fon alternatif terlalu berbeza dari fon pilihan, ia boleh menjejaskan kebolehbacaan fon alternatif.

Hartanah sangat penting dalam kes ini kerana ia membolehkan anda menetapkan ketinggian x semua fon kepada nilai yang sama, dengan itu meningkatkan kebolehbacaannya.

Pilih nilai

yang sesuai font-size

Sekarang anda memahami pentingnya menggunakan atribut font-size-adjust, belajar cara menggunakannya di laman web anda. Harta ini mempunyai sintaks berikut:

Nilai awal font-size-adjust adalah . Nilai

bermaksud bahawa nilai

siri font yang berbeza tidak akan diselaraskan. font-size-adjust

anda juga boleh menetapkan nilai atribut font-size-adjust ke nombor. Nombor ini digunakan untuk mengira ketinggian x semua fon pada halaman web ke nilai yang sama. Ketinggian x sama dengan nombor yang diberikan oleh saiz fon. Ini dapat meningkatkan kebolehbacaan fon saiz kecil. Berikut adalah contoh cara menggunakan atribut font-size-adjust:

<code class="language-css">body {
  font-family: 'Lato', Verdana, sans-serif;
}</code>

ketinggian x semua fon kini akan menjadi 20px * 0.6 = 12px. Saiz sebenar fon yang diberikan kini boleh diubah untuk memastikan ketinggian x kekal pada 12px pada setiap masa. Saiz fon yang diselaraskan baru untuk fon yang diberikan boleh dikira menggunakan formula berikut:

c = (a / a ') s.

di sini, c adalah saiz fon yang diselaraskan untuk digunakan, s adalah nilai saiz fon yang ditentukan, a adalah nisbah aspek yang ditentukan oleh atribut font-size-adjust, dan 'adalah nisbah aspek fon yang perlu diselaraskan.

anda tidak boleh menetapkan font-size-adjust ke nilai negatif. Nilai 0 akan menyebabkan teks tidak mempunyai ketinggian, dengan kata lain, teks sebenarnya akan tersembunyi. Dalam penyemak imbas yang lebih tua seperti Firefox 40, nilai 0 bersamaan dengan penetapan font-size-adjust ke none.

Dalam kebanyakan kes, pemaju biasanya mencuba beberapa nilai saiz fon untuk melihat nilai mana yang terbaik untuk font yang diberikan. Ini bermakna bahawa idealnya mereka mahu ketinggian x semua pilihan fon menjadi sama dengan ketinggian x fon pilihan mereka. Dalam erti kata lain, nilai yang paling sesuai untuk atribut font-size-adjust adalah nisbah aspek font pilihan.

bagaimana untuk menentukan nisbah aspek font

Untuk menentukan nisbah aspek yang betul dari fon, anda boleh bergantung pada fakta bahawa saiz fon saiznya harus sama dengan saiz fon asal yang anda tentukan. Ini bermakna bahawa dalam persamaan sebelumnya, A harus sama dengan '.

Langkah pertama dalam mengira nisbah aspek adalah untuk mewujudkan dua elemen. Kedua -dua elemen akan mengandungi satu huruf dan sempadan sekitarnya (kedua -dua huruf mestilah sama kerana kita perlu membandingkan antara kedua -dua elemen ini). Di samping itu, nilai atribut font-size untuk kedua -dua elemen adalah sama, tetapi hanya satu daripada mereka juga akan menggunakan atribut font-size-adjust. Apabila nilai font-size-adjust sama dengan nisbah aspek fon yang diberikan, saiz dua huruf dalam setiap elemen akan sama.

Gunakan di laman web font-size-adjust

Sokongan penyemak imbas: Pada masa ini, hanya Firefox menyokong font-size-adjust secara lalai. Bermula dengan versi 43 dan 30, Chrome dan Opera menyokong harta ini selepas platform web eksperimen mempunyai bendera (didayakan dalam Chrome: // Flags). Edge dan Safari tidak menyokong atribut font-size-adjust sama sekali.

Jika anda memutuskan untuk menggunakan harta ini, sokongan penyemak imbas yang lebih rendah tidak sepatutnya menjadi masalah sama sekali. Harta ini direka dengan keserasian mundur dalam fikiran. Penyemak imbas yang tidak menyokong harta ini akan memaparkan teks secara normal, sementara pelayar yang menyokong harta ini akan menyesuaikan saiz fon mengikut nilai harta font-size-adjust.

Kesimpulan

Selepas membaca tutorial ini, anda kini tahu peranan atribut font-size-adjust, kepentingan mereka, dan bagaimana mengira nisbah aspek fon yang berbeza.

Kerana font-size-adjust boleh diturunkan dengan anggun di pelayar yang lebih tua, anda boleh mula menggunakannya dengan segera untuk meningkatkan bacaan teks di laman web pengeluaran anda.

(gambar pada akhir artikel adalah sama dengan permulaan artikel)

Atas ialah kandungan terperinci Tingkatkan tipografi web dengan saiz fon CSS menyesuaikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!