Menggunakan sifat tersuai CSS untuk menyesuaikan berat fon berubah dalam mod gelap

Impak Mod Gelap pada Keterbacaan Teks: Penyelesaian CSS Menggunakan Fon Variabel

Mod gelap, sementara estetika menyenangkan, sering memberikan cabaran: teks boleh kelihatan lebih berat terhadap latar belakang gelap. Artikel ini meneroka penyelesaian menggunakan sifat tersuai CSS dan fon berubah -ubah untuk menangani isu ini, memastikan penampilan teks yang konsisten merentasi mod cahaya dan gelap.

Masalahnya bukan ilusi; Watak -watak yang lebih ringan benar -benar kelihatan lebih berani pada latar belakang yang lebih gelap. Ini mudah dilihat apabila membandingkan teks mod cahaya dan gelap, dan menjadi lebih jelas apabila membalikkan warna.

Penyelesaian menggunakan fon berubah -ubah

Fon berubah menawarkan penyelesaian yang kuat. Kesan ideal melibatkan teks penipisan halus dalam mod gelap tanpa mengubah lebar watak. Kita boleh mencapai ini melalui beberapa strategi:

1. Secara manual menyesuaikan font-weight : Ini melibatkan secara langsung mengubahsuai nilai-nilai font-weight dalam pertanyaan media mod gelap. Walaupun berfungsi, ia menjadi rumit dengan banyak elemen.

2. Multiplier font-weight : Pendekatan yang lebih elegan menggunakan harta tersuai CSS ( --font-weight-multiplier ) untuk mengawal pelarasan berat badan. Pengganda ini mengubah font-weight lalai setiap elemen dalam mod gelap. Sebagai contoh, penetapan --font-weight-multiplier kepada 0.85 mengurangkan berat badan sebanyak 15%.

3. Pemilih Universal dan Multiplier: Teknik lanjutan ini memanfaatkan scoping pembolehubah CSS dan pemilih sejagat ( * ) untuk memohon pengiraan pengganda secara global. Ini memudahkan CSS tetapi memerlukan pertimbangan yang teliti untuk mengelakkan kesan yang tidak diingini pada unsur -unsur tertentu.

4. font-variation-settings dan manipulasi Axis: Sesetengah fon berubah-ubah menawarkan paksi seperti "grad" (gred) atau "DRKM" (mod gelap) yang secara langsung mengawal berat badan tanpa menjejaskan lebar watak. Roboto Flex menggunakan "grad," manakala fon DarkMode Dalton Maag mempunyai paksi "DRKM".

Strategi 1: Manipulasi font-weight

Kaedah yang paling mudah adalah menyesuaikan font-weight secara manual untuk setiap elemen dalam pertanyaan media mod gelap. Walau bagaimanapun, ini menjadi kurang terkawal kerana bilangan elemen meningkat.

 / * Lalai (mod cahaya) css */
badan {font-weight: 400; }
kuat {font-weight: 700; }

/ * Mod gelap css */
@media (lebih suka-warna-skema: gelap) {
  badan {font-weight: 350; }
  kuat {font-weight: 600; }
}

Strategi 2: Pengganda font-weight dengan sifat tersuai

Menggunakan harta tersuai ( --font-weight-multiplier ) menyediakan penyelesaian yang lebih banyak dipelihara.

 / * Sifat tersuai khusus-mode-mode */
@media (lebih suka-warna-skema: gelap) {
  : root {--font-weight-multiplier: .85; }
}

/ * Gaya CSS lalai ... */
badan {font-weight: calc (400 * var (-font-weight-multiplier, 1)); }
kuat {font-weight: calc (700 * var (-font-weight-multiplier, 1)); }

Strategi 3: Pemilih dan pengganda sejagat

Pendekatan ini menggunakan pengganda untuk semua elemen sekaligus.

 / * Sifat tersuai lalai */
: root {--font-weight: 400; --Font-Weight-Multiplier: 1; }
Strong {--font-weight: 700; }

/ * Sifat tersuai khusus-mode-mode */
@media (lebih suka-warna-skema: gelap) {
  : root {--font-weight-multiplier: .85; }
}

/ * Memohon sifat tersuai ... */
* {font-weight: calc (var (-font-weight, 400) * var (-font-weight-multiplier, 1)); }

Strategi 4: Manipulasi Axis dengan font-variation-settings

Fon dengan paksi "grad" atau "DRKM" menawarkan kawalan langsung ke atas berat badan.

 / * Untuk roboto flex ("grad" paksi) */
: root {--grad: 0; }
@media (lebih suka-warna-skema: gelap) {: root {--grad: -.75; }}
badan {font-variation-settings: "grad" var (-grad, 0); }

Pertimbangan tambahan

• Skrin resolusi tinggi: Kesannya kurang jelas pada paparan retina. Laraskan pengganda dengan sewajarnya.
• Fon Campuran: Berhati-hati mempertimbangkan kesan pada fon dengan paksi yang berbeza atau fon tidak berubah.
• SURAT-SPACING: Mengurangkan font-berat boleh menyempitkan watak-watak. Laraskan jarak huruf seperti yang diperlukan.

Dengan memanfaatkan teknik -teknik ini, pemaju dapat memastikan teks yang konsisten dan mudah dibaca merentasi mod cahaya dan gelap, meningkatkan pengalaman pengguna keseluruhan. Demo yang mempamerkan strategi ini tersedia [pautan ke demo].

Atas ialah kandungan terperinci Menggunakan sifat tersuai CSS untuk menyesuaikan berat fon berubah dalam mod gelap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!