웹사이트 검색

CSS 시스템 글꼴 스택 참조


웹 사이트의 글꼴은 최종 모양과 형태로 페이지를 표시하기 전에 브라우저가 다운로드해야 하는 총 번들 크기의 큰 부분을 쉽게 차지할 수 있습니다. 또한 악명 높은 글꼴 표시 속성과 같은 모든 종류의 문제에 대해 걱정해야 합니다.

또한 웹 사이트에서 찾은 텍스트는 거의 항상 가장 중요한 부분이므로 제대로 보이지 않거나 읽기 어려운 텍스트는 원하지 않습니다. 성능과 모양 및 느낌을 모두 만족시키기 위해 정통한 웹 디자이너는 무엇을 해야 합니까?

한 가지 해결책은 실제로 사용자의 장치에 이미 설치된 글꼴을 사용하는 것입니다. 과거에는 일부 인기 있는 시스템에 아름다운 글꼴이 내장되어 있지 않았기 때문에 이는 그다지 우아한 솔루션이 아니었습니다. 그러나 지금은 상황이 달라졌으며 모든 주요 운영 체제에는 보기 좋고 읽기 좋은 sans serif 시스템 글꼴이 함께 제공됩니다.

따라서 요령은 시스템 글꼴을 사용해야 하는 요소의 font-family 속성 값으로 모든 기본 시스템 글꼴 이름을 제공하는 것입니다. 그러면 브라우저는 현재 시스템에서 찾을 수 있는 첫 번째 항목을 사용합니다. 이것은 또한 텍스트가 읽고 있는 시스템에 따라 다르게 보일 것임을 의미합니다. 그러나 그것이 반드시 나쁜 것은 아닙니다. 텍스트가 읽고 있는 OS에 고유하게 느껴지기 때문입니다.

Sans Serif 시스템 글꼴 스택

더 이상 고민하지 않고 바로 이 웹 사이트에서 사용되는 시스템 글꼴 스택 버전은 다음과 같습니다.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Oxygen-Sans, Ubuntu, Cantarell,
               "Helvetica Neue", sans-serif;
}

이 스택은 WordPress에서 사용되는 것과 동일하며 가변 글꼴의 콘텐츠에 대해 지금까지 꽤 잘 작동했지만 콘텐츠 자체는 시스템 글꼴을 사용합니다.

궁금한 경우 해당 글꼴/키워드에 대한 분석은 다음과 같습니다.

  • -apple-systemBlinkMacSystemFont: 운영 체제 버전에 따라 일반적으로 San Francisco 또는 Helvetica Neue와 같은 Apple 장치의 시스템 글꼴을 참조하는 데 사용되는 키워드 체계. 일부 최신 브라우저에서는 system-ui 키워드를 사용하여 이 두 키워드의 작업을 수행할 수 있습니다.
  • Segoe UI: Windows 시스템에서 사용됩니다.
  • Roboto: Android 기기용 시스템 글꼴입니다.
  • Oxygen-Sans: KDE를 사용하는 Linux 시스템.
  • 우분투: 우분투 리눅스
  • Cantarell: Gnome을 사용하는 Linux 시스템(Ubuntu 제외)
  • Helvetica Neue: 이전 시스템이 모두 실패한 경우를 대비하여 많은 시스템(특히 Apple 시스템)에서 사용할 수 있는 일반적인 폴백 글꼴입니다.
  • sans-serif: 다른 모든 방법이 실패하면 기본 브라우저 sans-serif 글꼴로 대체합니다. 종종 가장 만족스러운 결과가 아니므로 font-family: sans-serif를 사용하지 않는 이유입니다.

삶의 대부분의 것들과 마찬가지로 시스템 글꼴 스택에는 다양한 종류가 있으며 각각 조금씩 다릅니다. 예를 들어 GitHub에서 사용하는 스택은 다음과 같습니다.

모노스페이스 시스템 글꼴 스택

세리프 기반 글꼴에 대한 시스템 글꼴 스택은 없지만 코드 스니펫 등에 정말 유용할 수 있는 모노스페이스 글꼴에 대한 스택이 있습니다. 다음은 Bootstrap v4에서 사용하는 것입니다(GitHub도 매우 유사한 버전 사용).

code {
  font-family: SFMono-Regular, Menlo, Monaco,
               Consolas, "Liberation Mono", 
               "Courier New", monospace;
}

@font-face를 사용하는 시스템 글꼴

CSS의 여러 위치에서 여러 글꼴 이름의 동일한 문자열을 반복하는 것이 지겹다면 전체 스택을 참조하는 단일 이름을 정의하기 위해 @font-face at-rule에 문서화된 트릭이 있습니다.