Back to Question Center
0

Meningkatkan Typography Web dengan CSS Font Size Laraskan            Meningkatkan Tipografi Web dengan CSS Ukuran Font Laraskan Topik Terlibat: CSSBootstrapSassFrameworksAudio & Semalt

1 answers:
Meningkatkan Typography Web dengan CSS Saiz Font Laraskan

Meningkatkan Typography Web dengan CSS Font Size LaraskanMeningkatkan Tipografi Web dengan CSS Ukuran Font Laraskan Topik Terlibat:
CSSBootstrapSassFrameworksAudio & Semalt

Artikel ini dikupas oleh Panayotis Matsinopoulos. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint sebaik mungkin!

Ciri-ciri fon saiz-menyesuaikan dalam CSS membolehkan pemaju menentukan saiz fon berdasarkan ketinggian huruf kecil dan bukan huruf besar. Ini boleh meningkatkan keterlihatan teks di web.

Dalam artikel ini, anda akan belajar tentang pentingnya fon saiz-menyesuaikan harta dan cara menggunakannya dengan betul dalam projek anda.

Kepentingan font-size-adjust

Kebanyakan laman web yang anda lawati terdiri daripada teks. Oleh kerana perkataan bertulis adalah sebahagian penting dari laman web, masuk akal untuk memberi perhatian khusus kepada jenis huruf yang anda gunakan untuk memaparkan maklumat anda. Memilih typeface yang betul boleh menyebabkan pengalaman membaca yang menyenangkan. Semalt, menggunakan salah satu boleh membuat laman web tidak boleh dibaca. Sebaik sahaja anda memutuskan jenis huruf yang anda mahu gunakan, anda biasanya memilih saiz yang sesuai untuknya.

Hartanah font-size menetapkan saiz semua pilihan font-family yang anda ingin gunakan di laman web. Walau bagaimanapun, kebanyakan masa itu biasanya dipilih sedemikian rupa sehingga pilihan pertama font-family kelihatan baik. Masalah timbul apabila pilihan pertama tidak tersedia untuk beberapa sebab dan penyemak imbas membuat teks menggunakan salah satu fon mundur yang disenaraikan dalam dokumen CSS.

Sebagai contoh, memandangkan peraturan CSS ini:

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

Jika 'Lato', yang muat turun penyemak imbas anda dari Google Font, tidak tersedia, font sandaran seterusnya, dalam kes ini Verdana, akan digunakan sebaliknya. Walau bagaimanapun, nilai font saiz dipilih dengan 'Lato' dalam fikiran, dan bukan dengan Verdana.

Apakah Nilai Aspek Font Web?

Saiz fon yang jelas serta keterbacaannya boleh berbeza-beza untuk nilai tetap saiz fon . Ini terutama berlaku untuk skrip seperti Latin yang membezakan antara huruf besar dan huruf kecil. Dalam kes sedemikian, nisbah ketinggian huruf kecil kepada rakan-rakan huruf besar mereka adalah faktor penting dalam menentukan keterbacaan fon yang diberikan. Nisbah ini biasanya dipanggil nilai aspek fon.

Seperti yang saya nyatakan sebelum ini, sebaik sahaja anda menetapkan nilai font saiz , ia akan tetap berterusan untuk semua keluarga font. Walau bagaimanapun, ini boleh menjejaskan kebolehlihatan fon sandaran jika nilai aspeknya terlalu berbeza daripada nilai aspek fon pilihan pertama.

Peranan fon saiz-menyesuaikan harta menjadi sangat penting dalam situasi seperti itu, kerana ia membolehkan anda menetapkan ketinggian x semua fon ke nilai yang sama dengan itu meningkatkan keterbacaan mereka.

Memilih Nilai Kanan untuk menyesuaikan saiz font

Sekarang bahawa anda tahu pentingnya menggunakan font-size-adjust property, sudah tiba masanya untuk belajar cara menggunakannya di laman web anda. Harta ini mempunyai sintaks yang berikut:

     saiz font-laras: tiada |        

Nilai awal saiz huruf-menyesuaikan ialah tidak ada . Nilai tidak ada bermakna tiada pelarasan akan dibuat pada nilai saiz 17 huruf pilihan font-family yang berlainan.

Anda juga boleh menetapkan nilai fon saiz-menyesuaikan harta kepada nombor. Ketinggian x adalah sama dengan nombor yang didarabkan dengan saiz huruf . Ini boleh meningkatkan kebolehbacaan fon pada saiz kecil agak sedikit. Berikut ialah contoh menggunakan fon saiz-menyesuaikan harta.

     saiz fon: 20px;menyesuaikan saiz font: 0. 6;     

Ketinggian x semua fon kini akan menjadi 20px * 0. 6 = 12px. Saiz sebenar font yang diberikan kini boleh diubah untuk memastikan ketinggian x sentiasa berada pada 12px. Huruf fon disesuaikan yang baru daripada font tertentu boleh dikira menggunakan formula ini:

c = (a / a ') s .

Di sini, c adalah bersaiz 17 huruf untuk digunakan, s adalah nilai ) ialah nilai aspek yang ditentukan oleh fon saiz-menyesuaikan harta dan ' adalah nilai aspek fon yang perlu diselaraskan.

Anda tidak boleh menetapkan saiz font-laraskan kepada nilai negatif. Nilai 0 akan menghasilkan teks tanpa ketinggian. Dalam erti kata lain, teks akan tersembunyi dengan berkesan. Dalam pelayar yang lebih tua, seperti Firefox 40, nilai 0 bersamaan dengan menetapkan saiz font-laras hingga tidak ada .

Dalam kebanyakan kes, pemaju secara amnya bereksperimen dengan beberapa nilai fon saiz untuk melihat apa yang paling sesuai untuk font tertentu. Ini bermakna yang idealnya, mereka akan menginginkan ketinggian x semua pilihan font untuk menjadi sama dengan ketinggian x pilihan pertama mereka. Dengan kata lain, nilai yang paling sesuai untuk fon saiz menyesuaikan adalah nilai aspek font pilihan pertama anda.

Bagaimana untuk mengetahui Nilai Aspek Font

Untuk menentukan nilai aspek yang tepat untuk fon, anda boleh bergantung pada fakta bahawa saiz fon diselaraskan harus sama dengan saiz fon asal yang anda nyatakan . Ini bermakna a sepatutnya sama dengan a ' dalam persamaan sebelumnya.

Langkah pertama untuk mengira nilai aspek ialah penciptaan dua elemen . Kedua-dua elemen ini akan mengandungi satu huruf dan sempadan di sekeliling setiap huruf (huruf harus sama untuk kedua-duanya elemen kerana kita perlu membuat perbandingan antara mereka). Selain itu, kedua-dua unsur tersebut akan mempunyai nilai yang sama untuk fon saiz harta, tetapi hanya satu daripada mereka juga akan menggunakan fon saiz-menyesuaikan harta. Apabila nilai saiz huruf-menyesuaikan bersamaan dengan nilai aspek font tertentu, kedua-dua huruf dalam setiap elemen akan mempunyai saiz yang sama.

Dalam demo berikut, saya telah membuat sempadan di sekeliling huruf 't' dan 'b' dan menggunakan nilai yang berbeza-huruf-laras untuk setiap pasangan.

Sematkan coretan yang berkaitan:

    . diselaraskan-a {font-size-adjust: 0. 4;}. disesuaikan-b {font-size-adjust: 0. 495;}. disesuaikan-c {menyesuaikan saiz font: 0. 6;}     

Seperti yang anda dapat lihat dalam demo langsung di bawah, nilai yang lebih tinggi saiz huruf-menyesuaikan menjadikan huruf lebih besar dan nilai yang lebih rendah menjadikan huruf lebih kecil. Apabila saiz-saiz-menyesuaikan menjadi sama dengan nilai aspek, pasangan mencapai saiz yang sama.

Lihat Pen Penentuan Nilai Aspek oleh SitePoint (@SitePoint) pada CodePen.

Menggunakan penyesuaian saiz font pada Laman Web

Demo berikut menggunakan nilai 17-huruf-laras yang dikira dalam demo CodePen sebelumnya untuk fon 'Lato' untuk menyesuaikan saiz font ('Verdana' , yang bertindak sebagai font sandaran. Butang akan menghidupkan atau mematikan pelarasan supaya anda dapat melihat perbezaannya sendiri:

Lihat Pen Menggunakan Penyesuaian saiz font pada Laman Web oleh SitePoint (@SitePoint) pada CodePen.

Kesannya lebih ketara apabila anda bekerja dengan jumlah teks yang lebih besar. Semalat, contoh di atas sepatutnya cukup untuk memberi anda gambaran kegunaan harta ini. Bermula dari versi 43 dan 30, Chrome dan Opera menyokong harta ini di sebalik bendera "Ciri Platform Aplikasi Eksperimental" yang boleh diaktifkan di chrome: // flags. Edge dan Safari tidak menyokong sama ada saiz font-size-adjust .

Jika anda membuat keputusan untuk menggunakan harta ini, sokongan penyemak imbas yang lebih rendah tidak sepatutnya menjadi masalah sama sekali. Harta ini telah direka dengan keserasian ke belakang dalam fikiran. Pelayar tidak menyokong akan memaparkan teks secara normal semasa menyokong penyemak imbas akan menyesuaikan saiz font berdasarkan pada nilai font-size-adjust harta.

Kesimpulan

Selepas membaca tutorial, sekarang anda tahu apa yang fon saiz menyesuaikan harta, mengapa ia penting, dan bagaimana untuk menyelesaikan nilai aspek fon yang berbeza.

Kerana font-size-adjust mendegradasi anggun di pelayar lama, anda boleh meneruskan dan mula menggunakannya hari ini untuk meningkatkan keterbacaan teks dalam laman web pengeluaran.

Adakah anda tahu beberapa alat atau tip lain yang boleh membantu pengguna mengira nilai aspek font dengan pantas? Biarkan rakan-rakan pembaca tahu dalam komen.

March 1, 2018