Verwenden der benutzerdefinierten CSS -Eigenschaften, um variable Schriftgewichte im Dunklen Modus anzupassen

Der Einfluss des Dark -Modus auf die Textlehrbarkeit: Eine CSS -Lösung mit variablen Schriftarten

Der dunkle Modus ist zwar ästhetisch ansprechend, stellt jedoch oft eine Herausforderung dar: Text kann mit dunklen Hintergründen schwerer erscheinen. In diesem Artikel werden Lösungen unter Verwendung von CSS -benutzerdefinierten Eigenschaften und variablen Schriftarten untersucht, um dieses Problem anzugehen, um ein konsistentes Text -Erscheinungsbild in hellen und dunklen Modi zu gewährleisten.

Das Problem ist keine Illusion; Leichtere Charaktere erscheinen auf dunkleren Hintergründen wirklich mutiger. Dies ist beim Vergleich von hellem und dunklem Modus -Text leicht zu beobachten und wird bei der Umkehrung der Farben noch klarer.

Lösungen mit variablen Schriftarten

Variable Schriftarten bieten eine leistungsstarke Lösung. Der ideale Effekt beinhaltet subtil ausdünne Text im dunklen Modus, ohne die Zeichenbreite zu verändern. Wir können dies durch verschiedene Strategien erreichen:

1. Manuelles Einstellen font-weight : Dies beinhaltet die direkte Änderung der font-weight in einer Medienabfrage in Dark Mode. Während er funktionsfähig ist, wird es mit vielen Elementen umständlich.

2. font-weight : Ein eleganterer Ansatz verwendet eine CSS-benutzerdefinierte Eigenschaft ( --font-weight-multiplier ), um die Gewichtsanpassung zu steuern. Dieser Multiplikator verändert im Dunklen Modus das Standard font-weight jedes Elements. Beispielsweise verringert die Einstellung --font-weight-multiplier auf 0,85 das Gewicht um 15%.

3. Universal Selector und Multiplikator: Diese erweiterte Technik nutzt die variable CSS -Scoping der CSS und den Universal Selektor ( * ), um die Multiplikatorberechnung global anzuwenden. Dies vereinfacht das CSS, erfordert jedoch sorgfältige Überlegungen, um unbeabsichtigte Auswirkungen auf bestimmte Elemente zu vermeiden.

4. font-variation-settings und Achsenmanipulation: Einige variable Schriftarten bieten Achsen wie "Grad" (Grad) oder "DRKM" (Dunkelmodus), die das scheinbare Gewicht direkt steuern, ohne die Charakterbreite zu beeinflussen. Roboto Flex verwendet "Grad", während Dalton Maags Darkmode -Schriftart die "DRKM" -Axis enthält.

Strategie 1: Manipulation font-weight

Die einfachste Methode besteht darin, font-weight für jedes Element in einer Medienabfrage des Dark-Modus manuell anzupassen. Dies wird jedoch weniger überschaubar, wenn die Anzahl der Elemente zunimmt.

 / * Standard (Lichtmodus) CSS */
Körper {Schriftgewicht: 400; }
stark {Schriftgewicht: 700; }

/ * Dunkler Modus CSS */
@media (bevorzugt Farbscheme: dunkel) {
  Körper {Schriftgewicht: 350; }
  stark {Schriftgewicht: 600; }
}

Strategie 2: font-weight mit benutzerdefinierten Eigenschaften

Die Verwendung einer benutzerdefinierten Eigenschaft ( --font-weight-multiplier ) bietet eine bessere Lösung.

 / * Dunkelmodellspezifische benutzerdefinierte Eigenschaften */
@media (bevorzugt Farbscheme: dunkel) {
  : root {--font-Gewicht-Multiplikator: .85; }
}

/ * Standard CSS -Stile ... */
Body {Schriftgewicht: Calc (400 * var (-Schriftgewichts-Multiplikator, 1)); }
Starkes {Schriftgewicht: Calc (700 * var (-Schriftgewichts-Multiplikator, 1)); }

Strategie 3: Universal Selector und Multiplikator

Dieser Ansatz wendet den Multiplikator auf alle Elemente gleichzeitig an.

 / * Standard benutzerdefinierte Eigenschaften */
: root {--font-weight: 400; -FONT-Gewicht-Multiplikator: 1; }
Stark {--font-Gewicht: 700; }

/ * Dunkelmodellspezifische benutzerdefinierte Eigenschaften */
@media (bevorzugt Farbscheme: dunkel) {
  : root {--font-Gewicht-Multiplikator: .85; }
}

/ * Anwenden der benutzerdefinierten Eigenschaften ... */
* {Schriftgewicht: Calc (var (-Schriftgewicht, 400) * var (-Schriftgewichts-Multiplikator, 1)); }

Strategie 4: Achsenmanipulation mit font-variation-settings

Schriftarten mit "Grad" oder "DRKM" -Axten bieten eine direkte Kontrolle über das Gewicht.

 / * Für Roboto Flex ("Grad" Achse) */
: root { -Grad: 0; }
@Media (bevorzugt Farbscheme: dunkel) {: root {-Grad: -.75; }}
Body {Font-Variation-Settings: "Grad" var (-Grad, 0); }

Zusätzliche Überlegungen

• Hochauflösende Bildschirme: Der Effekt ist auf Retina-Displays weniger ausgeprägt. Passen Sie Multiplikatoren entsprechend an.
• Gemischte Schriftarten: Betrachten Sie sorgfältig die Auswirkungen auf Schriftarten mit verschiedenen Achsen oder nicht variablen Schriftarten.
• Buchstabenabstand: Absenkung des Schriftgewichts kann die Zeichen einschränken. Passen Sie nach Bedarf den Buchstaben an.

Durch die Nutzung dieser Techniken können Entwickler einen konsistenten und lesbaren Text in hellen und dunklen Modi sicherstellen und die allgemeine Benutzererfahrung verbessern. Eine Demo, die diese Strategien zeigt, ist verfügbar [Link zur Demo].

Das obige ist der detaillierte Inhalt vonVerwenden der benutzerdefinierten CSS -Eigenschaften, um variable Schriftgewichte im Dunklen Modus anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!