Foundation 템플릿(v2026.6)과의 호환성 문제

테마의 CSS에 다음을 추가하여 이를 변경할 수 있습니다:

body {
    --webkit-font-smoothing: auto;
}

이것이 하는 일에 대한 자세한 내용은 여기에 있습니다: A Modern CSS Reset • Josh W. Comeau

2018년에 출시된 macOS Mojave에서 Apple은 운영체제 전체에서 서브픽셀 안티앨리어싱(subpixel antialiasing)을 비활성화했습니다. 최신 하드웨어에서 이로 인한 해가 이득보다 크다는 것을 깨달았을 것으로 추측됩니다.

혼란스러운 점은, Chrome과 Safari와 같은 macOS 브라우저가 기본적으로 여전히 서브픽셀 안티앨리어싱을 사용한다는 것입니다. -webkit-font-smoothingantialiased로 설정하여 이를 명시적으로 꺼야 합니다.

차이를 보여주기 위해… 왼쪽은 --webkit-font-smoothing: auto;, 오른쪽은 --webkit-font-smoothing: antialiased;입니다.

macOS는 기본적으로 텍스트를 더 굵게 렌더링하지만, 이는 브라우저에서만 해당되고 운영체제의 다른 부분에는 적용되지 않습니다… antialiased를 사용하면 다른 운영체제에서 텍스트가 렌더링되는 모습에 더 가까워집니다… Windows의 Chrome에서는 이 CSS가 적용되지 않으며, 기본적으로 텍스트는 다음과 같이 보입니다:

이 변경 사항처럼 리셋(reset)으로 추가하는 것이 가치가 있는지 여부는 논쟁의 여지가 있습니다… 기술적으로 이는 macOS에서 글꼴을 더 얇게 보이게 하여 다른 운영체제에 더 가까운 외관을 제공하지만, 텍스트 렌더링 엔진이 다르기 때문에 메커니즘은 다릅니다.

Windows는 이 변경 사항 적용 후 macOS와 마찬가지로 얇게 보이지만, 엔진의 차이(Windows는 서브픽셀 안티앨리어싱을 수행하며, 이는 macOS에서 이 CSS를 통해 꺼지는 기능입니다)로 인해 글꼴이 약간 더 선명하게 렌더링됩니다.