다크 모드 및 가변 글꼴

우리는 이전에 CSS에서 Dark Mode를 논의했으며 문제에 대해 생각하고 있습니다. 흰색 텍스트는 일반적으로 흰색 배경의 검은 색 텍스트보다 검은 색 배경에서 읽을 수 없습니다. 어떤 생각을 한 후, 나는 변수 글꼴을 사용하여 어두운 모드에서 텍스트 무게를 줄임 으로써이 문제를 해결할 수 있다는 것을 깨달았습니다!

다음 예는이 문제를 보여줍니다. Google 글꼴의 Yanone Kaffeesatz 글꼴을 사용했습니다. 검은 색 배경의 흰색 텍스트 부분은 흰색 배경의 검은 색 텍스트 부분보다 두껍게 보입니다.

이상하게도, 텍스트 의이 두 단락은 실제로 400의 동일한 글꼴 중량 값을 사용합니다. 그러나 제 생각에는 흰색 텍스트는 특히 검은 배경에서 두껍고 검은 색으로 보입니다.

이 예를 자세히 살펴보십시오. 이것은 흰색 텍스트가 더 어두운 배경에 표시되는 방식입니다. 이것이 우리의 눈이 모양과 색을 인식하는 방법입니다. 경우에 따라 이것은 큰 문제가 아닐 수도 있지만 어두운 배경에서 빛 텍스트를 읽는 것이 항상 더 어렵습니다. 다크 모드 텍스트를 디자인 할 때주의를 기울이지 않으면 읽을 때 텍스트가 진동하는 느낌이들 수 있습니다.

이 문제를 어떻게 해결할 수 있습니까?

이것은 가변 글꼴이 작동하는 곳입니다! 어두운 모드가 활성화 될 때 더 가벼운 글꼴 두께를 사용하여 텍스트를보다 쉽게 ​​읽을 수 있습니다.

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

이 새로운 예를 사용하는 효과는 다음과 같습니다.

훨씬 낫다! 제 생각에,이 두 변형은 이제 훨씬 더 균형 잡힌 것 같습니다.

다시 말하지만, 그것은 단지 작은 차이 일 뿐이지 만 모든 훌륭한 디자인에는 그런 미세 조정이 포함됩니다. 이미 가변 글꼴을 사용하고 있으며 이러한 두께를 모두로드하는 경우 텍스트를 쉽게 읽을 수 있도록 텍스트를 반드시 조정해야한다고 생각합니다.

이 효과는 더 긴 텍스트 세그먼트의 차이를 비교하면 쉽게 찾을 수 있습니다. 이번에는 Literata 글꼴을 사용합니다.

오른쪽의 텍스트는 두껍게 느껴지 지만 그렇지 않습니다. 이것은 시각적 환상입니다. 위의 두 예제의 글꼴 두께는 500입니다.

따라서이 문제를 해결하기 위해 위의 예와 동일하게 수행 할 수 있습니다.

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

다시 말하지만, 이것은 미묘한 변화이지만, 이러한 크기에서 우리가 독서 경험에 기여하는 모든 타이포그래피 개선이 있기 때문에 중요합니다.

작은 Google 글꼴 프롬프트도 있습니다!

Google Fonts를 사용하면 문서를 통과 할 수 있습니다 부분적으로 추가되었습니다<code><link> 다음과 같이 웹 사이트에 글꼴을 추가하는 태그 :

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

이것은 로사리오 글꼴을 사용하고 515의 글꼴 두께를 추가합니다. 이것은 위의 코드의 wght@515 부분입니다. 이것이 가변 글꼴 인 경우 에도이 글꼴 두께 만 다운로드됩니다. 그러나 우리가 이것을하려고한다면 ...

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

... 아무 일도 일어나지 않을 것입니다! 실제로 글꼴이 전혀로드되지 않습니다. 대신, 우리는 다음과 같이 원하는 글꼴 두께 값의 범위를 선언해야합니다.

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

위 코드의 @300..500 섹션은 Google Fonts에게 300에서 500 사이의 모든 두께의 글꼴 파일을 다운로드하라고 지시합니다. 또는 각 두께 사이에 세미콜론을 추가하면 300과 500 두께 만 다운로드 할 수 있습니다. 예를 들어, 301 두께를 선택할 수 없습니다.

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

무엇이 잘못되었는지, 왜 글꼴이 전혀로드되지 않았는지 알아내는 데 몇 분이 걸렸으므로 Google Fonts 팀이 미래에 임베드 코드를 조금 더 명확하게 만들 것입니다. 어딘가에 옵션이나 토글 스위치가 범위 나 특정 무게를 선택하기 위해 어딘가에 추가해야 할 수도 있습니다 (또는 아마도 보지 못했을 수도 있습니다).

어쨌든, 나는 그것이 변이 가능한 글꼴이 그렇게 유용한 이유라고 생각합니다. 그들은 우리가 이전에 할 수 없었던 방식으로 텍스트를 조정할 수있게 해줍니다. 그래서, 가변 글꼴을 오래 살고 있습니다!

위 내용은 다크 모드 및 가변 글꼴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!