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

font-size-adjust

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.

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.

body {
  font-family: 'Lato', Verdana, sans-serif;
}

font-size Seperti yang dinyatakan sebelum ini, apabila nilai

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

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

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:

body {
  font-family: 'Lato', Verdana, sans-serif;
}

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)