Mod gelap dan fon berubah -ubah

Kami telah membincangkan mod gelap di CSS sebelum ini, dan saya telah memikirkan masalah: teks putih biasanya kurang dibaca pada latar belakang hitam daripada teks hitam pada latar belakang putih. Selepas beberapa pemikiran, saya menyedari bahawa kita dapat menyelesaikan masalah ini dengan menggunakan fon berubah -ubah untuk mengurangkan berat teks dalam mod gelap!

Contoh berikut menunjukkan masalah ini, saya menggunakan fon Yanone Kaffeesatz dari font Google. Perhatikan bahawa bahagian teks putih pada latar belakang hitam kelihatan lebih tebal daripada bahagian teks hitam pada latar belakang putih.

Anehnya, kedua -dua perenggan teks ini sebenarnya menggunakan nilai berat fon yang sama sebanyak 400. Tetapi pada pendapat saya, teks putih kelihatan sangat tebal dan hitam pada latar belakang hitam.

Lihatlah dengan lebih dekat contoh ini. Ini adalah bagaimana teks putih memaparkan pada latar belakang yang lebih gelap; Ini adalah bagaimana mata kita melihat bentuk dan warna. Dalam sesetengah kes, ini mungkin bukan masalah besar, tetapi membaca teks cahaya pada latar belakang gelap selalu lebih sukar. Jika kita tidak memberi perhatian apabila merancang teks mod gelap, kita mungkin merasakan teks bergetar ketika membaca.

Bagaimana kita dapat menyelesaikan masalah ini?

Di sinilah fon berubah -ubah dimainkan! Kita boleh menggunakan ketebalan font yang lebih ringan untuk menjadikan teks lebih mudah dibaca apabila mod gelap diaktifkan:

 <code>body { font-weight: 400; } @media (prefers-color-scheme: dark) { body { font-weight: 350; } }</code>

Berikut adalah kesan menggunakan contoh baru ini:

Jauh lebih baik! Pada pendapat saya, kedua -dua varian ini kelihatan lebih seimbang.

Sekali lagi, ia hanya perbezaan yang kecil, tetapi semua reka bentuk yang hebat termasuk penalaan yang baik. Saya fikir jika anda sudah menggunakan fon berubah -ubah dan memuatkan semua ketebalan ini, anda pasti harus menyesuaikan teks untuk memudahkan dibaca.

Kesan ini lebih mudah dilihat jika kita membandingkan perbezaan antara segmen teks yang lebih lama. Kali ini kita menggunakan fon literata:

Perhatikan bahawa teks di sebelah kanan terasa lebih tebal, tetapi itu tidak berlaku. Ini hanya ilusi visual - ketebalan fon dari dua contoh di atas adalah 500.

Jadi, untuk menyelesaikan masalah ini, kita boleh melakukan perkara yang sama seperti contoh di atas:

 <code>body { font-weight: 500; } @media (prefers-color-scheme: dark) { body { font-weight: 400; } }</code>

Sekali lagi, ini adalah perubahan yang halus, tetapi penting kerana pada saiz ini, setiap peningkatan tipografi yang kami buat menyumbang kepada pengalaman membaca.

Terdapat juga fon Google yang kecil!

Font Google membolehkan anda melewati dokumen Sebahagiannya ditambah<code><link> Tags untuk menambah fon ke laman web anda seperti berikut:

 <code><link href="https://fonts.googleapis.com/css2?family=Rosario:wght@515&display=swap" rel="stylesheet"></code>

Ini menggunakan font Rosario dan menambah ketebalan fon 515 - ini adalah bahagian wght@515 di atas. Walaupun ini berlaku sebagai font pembolehubah, hanya ketebalan fon ini akan dimuat turun. Tetapi jika kita cuba melakukan ini ...

 <code>body { font-weight: 400; }</code>

... tiada apa yang akan berlaku! Malah, fon tidak dimuatkan sama sekali. Sebaliknya, kita perlu mengisytiharkan pelbagai nilai ketebalan fon yang kita mahu, seperti berikut:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300..500&display=swap" rel="stylesheet"></code>

Bahagian @300..500 dalam kod di atas memberitahu Font Google untuk memuat turun fail fon dengan semua ketebalan antara 300 dan 500. Sebagai alternatif, menambah titik koma antara setiap ketebalan hanya akan memuat turun ketebalan 300 dan 500 - jadi, sebagai contoh, anda tidak boleh memilih ketebalan 301:

 <code><link href="https://fonts.googleapis.com/css2?family=Yanone%20Kaffeesatz:wght@300;500&display=swap" rel="stylesheet"></code>

Saya mengambil masa beberapa minit untuk mengetahui apa yang berlaku dan mengapa fon tidak dimuatkan sama sekali, jadi diharapkan pasukan Font Google akan membuat kod embed sedikit lebih jelas pada masa akan datang. Mungkin pilihan atau suis togol harus ditambah di suatu tempat untuk memilih jarak atau berat tertentu (atau mungkin saya tidak melihatnya).

Bagaimanapun, saya fikir itulah sebabnya fon mutable sangat berguna; Mereka membenarkan kami menyesuaikan teks dengan cara yang tidak pernah kami dapat melakukannya sebelum ini. Jadi, lama hidup fon pembolehubah!

Atas ialah kandungan terperinci Mod gelap dan fon berubah -ubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!