시스템 UI와 친구들

시스템 글꼴을 사용하는 CSS 원라이너

우리는 맞춤형 글꼴을 좋아하지만 종종 깨닫지 못하는 비용이 따릅니다.

우리가 인터넷을 통해 글꼴을 로드할 때, 우리 자신의 웹사이트나 (금지된) Google 글꼴에서 온 것이든, 방문자를 위해 작지만 인지할 수 있는 "레이아웃 플래시"가 있습니다. 이는 브라우저가 초기에 대체 글꼴을 사용하여 콘텐츠를 렌더링한 다음 네트워크를 통해 사용자 지정 글꼴을 다운로드한 후 콘텐츠를 다시 렌더링하기 때문에 발생합니다.

설상가상으로 이것은 한 번만(일반적으로) 발생하는 일입니다.

"그게 왜 더 나빠?"라고 물을 것입니다.

글쎄요, 첫 번째 로드 후 글꼴이 개발자의 컴퓨터에 캐시되고 문제를 인식하지 못하기 때문에 더 나쁩니다. 그들은 처음 방문자가 웹사이트를 보는 방식으로 웹사이트를 보지 않습니다. 그들은 코드의 성능에 대해 자신감을 느끼는 반면, 웹 사이트를 처음 방문하는 방문자는 웹 사이트가 먼저 로드된 다음 모든 것이 이동하고 다시 렌더링되는 것을 보고 아마추어 같은 첫인상을 남기고 떠납니다.

이제 이것은 틈새 문제가 아니며 개발자가 사용자 경험을 개선하기 위해 사용한 많은 접근 방식이 있습니다. 그러나 여기에는 복잡성이 따릅니다.

가장 간단한 해결책은 사용자 지정 글꼴을 사용하지 않고 시스템 글꼴을 사용하는 것입니다! (감사합니다, 명백한 선장).

이것의 문제는 기본 OS 산세리프 글꼴을 사용하는 브라우저 표준 방법이 없다는 것입니다. 아니, 이전에는 그런 방법이 없었다.

이제 font-family: system-ui 와 함께 우리 게시물의 영웅이 있습니다.

시원한. 끝났습니까?

짐작하셨겠지만 이에 대한 브라우저 지원은 아직 진행 중입니다. 따라서 그동안 대부분의 OS에 대체 기능을 제공하는 더 긴 버전을 사용해야 합니다.

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

시스템 글꼴을 사용하는 것이 항상 해결책은 아니지만 시스템 글꼴이 있는 위치(예: 트랜잭션 HTML 이메일 본문)에서는 사용자 정의 글꼴을 로드하는 것보다 더 나은 접근 방식인 경우가 많습니다.

다음 시간까지 즐거운 CSSing하세요! 🧑‍💻


브라우저와의 전투에 대해 더 알고 싶으시면 에서 저희를 팔로우하세요.

또는 e2ee 사진 저장 서비스를 구축하는 많은 엔지니어와 어울리고 싶다면 Discord에서 인사하십시오.