[css] CSS 전환 중 Webkit 텍스트 렌더링 변경을 방지하는 방법

2020 년 8 월 업데이트

더 이상 하위 픽셀 글꼴 다듬기를 활성화하기 위해 미디어 쿼리로 Safari를 대상으로 지정할 필요가 없습니다. 기본값은 괜찮습니다.

그러나 기본적으로 하위 픽셀 글꼴 다듬기를 사용 하지만 , 일관된 텍스트 렌더링을 원하는 모든 사람을 위해 Chrome의 글꼴 다듬기 에서 연고 에 중요한 부분이 있습니다 .

1. 어두운 배경에 밝은 텍스트를 Chrome에서 렌더링 한 것입니다.
2. 밝은 배경에 어두운 텍스트를 Chrome에서 렌더링 한 것입니다.

위의 문자 e에서 전체의 크기를보십시오. 어두운 배경의 밝은 텍스트는 밝은 배경의 어두운 텍스트 (동일한 CSS 글꼴 스타일)보다 눈에 띄게 더 무거운 가중치로 렌더링됩니다.

사용자의 어둡거나 밝은 테마 설정을 존중하는 사이트의 한 가지 해결책은 어두운 모드로 제한된 미디어 쿼리로 Chrome을 타겟팅하고 다음과 같이 하위 픽셀이 아닌 스무딩으로 전환하는 것입니다.

@media screen
and (-webkit-min-device-pixel-ratio: 0)
and (min-resolution: 0.001dpcm)
and (prefers-color-scheme: dark) {
  body {
    -webkit-font-smoothing: antialiased;
  }
}

결과 :

빛을 어둡게 렌더링하든, 어둡게 렌더링하든 관계없이 훨씬 더 일관된 텍스트 가중치.

이전과 이후의 나란히 비교를 확인하십시오.

–

2018 년 5 월 업데이트

-webkit-font-smoothing: subpixel-antialiased이제 Chrome에서는 효과가 없지만 Safari에서는 여전히 많은 것을 개선하지만 RETINA에서만 가능합니다. 망막 화면의 Safari에서 텍스트가 없으면 텍스트가 얇고 멍청한 반면 텍스트가 있으면 적절한 무게가 있습니다. 그러나 Safari의 비 레티 나 디스플레이에서 이것을 사용하면 (특히 가벼운 값에서) 텍스트는 재앙입니다. 미디어 쿼리를 사용하는 것이 좋습니다.

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-font-smoothing: subpixel-antialiased;
  }
}

---

-webkit-font-smoothing: subpixel-antialiased더 얇은 앤티 앨리어싱 된 텍스트를 적어도 부분적으로 피하려는 경우 명시 적으로 설정 하는 것이 현재 최상의 솔루션입니다.

–tl; dr–

기본 글꼴 렌더링이 하위 픽셀 앤티 앨리어싱을 사용하는 Safari와 Chrome 모두에서, 위의 제안처럼 translateZ를 사용하여 변환을 사용하거나 심지어 크기 전환 만 사용하도록 GPU 기반 렌더링을 강제하는 CSS는 Safari와 Chrome이 자동으로 “포기”합니다. “하위 픽셀 앤티 앨리어싱 된 글꼴 다듬기 대신 앤티 앨리어싱 된 텍스트로 전환합니다.이 텍스트는 특히 Safari에서 훨씬 더 밝고 얇아 보입니다.

다른 응답은 단순히 더 얇은 안티에 일리 어스 텍스트에 글꼴을 부드럽게 설정하거나 강제하여 지속적인 렌더링을 유지하는 데 중점을 두었습니다. 내 눈에 translateZ 또는 backface hidden을 사용하면 텍스트 렌더링의 품질이 크게 저하되며 텍스트가 일관성을 유지하고 더 얇은 텍스트를 사용하는 것이 괜찮을 경우 최상의 솔루션 -webkit-font-smoothing: antialiased입니다. 그러나 명시 적으로 설정하면 -webkit-font-smoothing: subpixel-antialiased실제로 약간의 효과가 있습니다. 텍스트는 여전히 약간 변경되고 GPU에서 렌더링되는 전환 중에 눈에 띄게 얇아 지지만이 설정이 없을 때만 큼 얇지는 않습니다. 따라서 이것은 최소한 부분적으로 안티 에일 리 어스 텍스트로의 전환을 방해하는 것처럼 보입니다.