웹 폰트 네트워크 지연 없이 최적의 렌더링 성능을 내는 OS 네이티브 시스템 폰트 스택 설정 가이드입니다.
범용 시스템 폰트 스택
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
플랫폼별 시스템 폰트 매핑
| 폰트 명칭 / 토큰 | 대상 운영체제 및 브라우저 |
|---|---|
-apple-system |
macOS 및 iOS Safari (San Francisco) |
BlinkMacSystemFont |
macOS 환경의 Chrome / Blink 엔진 |
"Segoe UI" |
Windows 7, 8, 10, 11 |
Roboto |
최신 Android 및 ChromeOS |
Oxygen |
KDE 데스크톱 환경 Linux |
Ubuntu |
Ubuntu Unity / GNOME 환경 Linux |
Cantarell |
GNOME 3+ 환경 Linux |
"Fira Sans" |
Firefox OS 및 Mozilla 환경 |
"Droid Sans" |
구형 Android 기기 |
"Helvetica Neue" |
macOS 10.9 (Mavericks) 및 10.10 (Yosemite) |
sans-serif |
범용 대체 sans-serif 폰트 |
최신 표준 제네릭 키워드 (system-ui)
CSS Fonts Module Level 4 규격에 따라 최신 브라우저는 표준화된 제네릭 키워드를 지원합니다:
body {
font-family: system-ui, sans-serif;
}