CSS 사용자 정의 속성 사용하여 어두운 모드에서 가변 글꼴 무게를 조정

Dark Mode의 텍스트 레코드에 미치는 영향 : 가변 글꼴을 사용한 CSS 솔루션

어두운 모드는 미적으로 유쾌하지만 종종 도전을 제시합니다. 텍스트는 어두운 배경에 대해 무겁게 보일 수 있습니다. 이 기사는 CSS 사용자 정의 속성과 가변 글꼴을 사용 하여이 문제를 해결하기 위해 솔루션을 탐색하여 밝은 모드와 어두운 모드에서 일관된 텍스트 모양을 보장합니다.

문제는 환상이 아닙니다. 더 가벼운 캐릭터는 진정으로 어두운 배경에서 더 대담하게 나타납니다. 이것은 빛과 어두운 모드 텍스트를 비교할 때 쉽게 관찰 할 수 있으며 색상을 반전 할 때 더욱 명확 해집니다.

가변 글꼴을 사용하는 솔루션

가변 글꼴은 강력한 솔루션을 제공합니다. 이상적인 효과는 캐릭터 너비를 변경하지 않고 어두운 모드에서 미묘하게 얇게하는 텍스트를 포함합니다. 우리는 몇 가지 전략을 통해이를 달성 할 수 있습니다.

1. font-weight 수동 조정 : 여기에는 다크 모드 미디어 쿼리 내에서 font-weight 값을 직접 수정하는 것이 포함됩니다. 기능적이지만 많은 요소로 번거 롭습니다.

2. font-weight Multiplier : 보다 우아한 접근 방식은 CSS 사용자 정의 속성 ( --font-weight-multiplier )을 사용하여 무게 조정을 제어합니다. 이 승수는 각 요소의 기본 font-weight 어두운 모드에서 수정합니다. 예를 들어, 설정 --font-weight-multiplier 0.85로 설정하면 무게가 15%감소합니다.

3. 범용 선택기 및 승수 : 이 고급 기술은 CSS 가변 범위와 범용 선택기 ( * )를 활용하여 전 세계적으로 승수 계산을 적용합니다. 이것은 CSS를 단순화하지만 특정 요소에 의도하지 않은 영향을 피하기 위해 신중한 고려가 필요합니다.

4. font-variation-settings 및 축 조작 : 일부 가변 글꼴은 "Grad"(Grade) 또는 "DRKM"(Dark Mode)과 같은 축을 제공하여 캐릭터 너비에 영향을 미치지 않고 명백한 무게를 직접 제어합니다. Roboto Flex는 "Grad"를 사용하는 반면 Dalton Maag의 DarkMode 글꼴에는 "DRKM"축이 있습니다.

전략 1 : font-weight 조작

가장 간단한 방법은 다크 모드 미디어 쿼리에서 각 요소의 font-weight 수동으로 조정하는 것입니다. 그러나 요소 수가 증가함에 따라 관리가 덜 관리됩니다.

 / * 기본값 (라이트 모드) CSS */
신체 {글꼴 중량 : 400; }
강한 {글꼴 중량 : 700; }

/ * 다크 모드 CSS */
@Media (Color-Scheme를 선호 : Dark) {
  신체 {글꼴 중량 : 350; }
  강한 {글꼴 중량 : 600; }
}

전략 2 : 사용자 지정 속성이있는 font-weight 승수

사용자 정의 속성 ( --font-weight-multiplier )을 사용하면보다 관리 가능한 솔루션이 제공됩니다.

 / * 다크 모드 별 사용자 정의 속성 */
@Media (Color-Scheme를 선호 : Dark) {
  : root {-font-weight-multiplier : .85; }
}

/ * 기본 CSS 스타일 ... */
신체 {font-weight : calc (400 * var (-Font-weight-multiplier, 1)); }
강한 {font-weight : calc (700 * var (-Font-weight-multiplier, 1)); }

전략 3 : 범용 선택기 및 승수

이 접근법은 승수를 한 번에 모든 요소에 적용합니다.

 / * 기본 사용자 정의 속성 */
: root {-font-weight : 400; --가중-다중 플라이어 : 1; }
강한 {-Font-Weight : 700; }

/ * 다크 모드 별 사용자 정의 속성 */
@Media (Color-Scheme를 선호 : Dark) {
  : root {-font-weight-multiplier : .85; }
}

/ * 사용자 정의 속성 적용 ... */
* {font-weight : calc (var (-Font-weight, 400) * var (-Font-weight-multiplier, 1)); }

전략 4 : font-variation-settings 통한 축 조작

"Grad"또는 "DRKM"축이있는 글꼴은 체중을 직접 제어합니다.

 / * Roboto Flex의 경우 ( "Grad"Axis) */
: root {-grad : 0; }
@Media (Color-Scheme을 선호합니다 : Dark) {: root {-grad : -.75; }}
신체 {font-variation-settings : "grad"var (-grad, 0); }

추가 고려 사항

• 고해상도 스크린 : 이 효과는 망막 디스플레이에서 덜 두드러집니다. 그에 따라 승수를 조정하십시오.
• 혼합 글꼴 : 축 또는 비가 변하지 않는 글꼴이 다른 글꼴에 미치는 영향을 신중하게 고려하십시오.
• 문자 스페이스 : 글꼴 체중을 낮추면 캐릭터가 좁아 질 수 있습니다. 필요에 따라 문자 간격을 조정하십시오.

이러한 기술을 활용하여 개발자는 밝은 모드와 어두운 모드에서 일관되고 읽기 쉬운 텍스트를 보장하여 전체 사용자 경험을 향상시킬 수 있습니다. 이러한 전략을 보여주는 데모는 이용 가능합니다 [데모 링크].

위 내용은 CSS 사용자 정의 속성 사용하여 어두운 모드에서 가변 글꼴 무게를 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!