ΛneOK v4 blog
일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
CSS - 한글 기본 시스템 글꼴 설정
CSS system fonts
CSS system fonts cheatsheet
블로그에서 보이는 폰트 같은 것에 별다른 관심이 없다면 그냥 지나칠 것 중에 하나입니다. 그냥 돋음이나 굴림으로 통일하면 쉽게 되지만 조금만 신경을 쓴다면 결코 쉽게 넘어갈 수 있는 부분도 아닙니다. 그리고 인터넷 조금만 찾다 보면 기본 시스템 글꼴이 나옵니다. 하지만 개인적으로 한글의 글꼴의 기본이 없는 것 같아 몇 군데 찾아보고 평균을 잡아서 적어 볼까 합니다.
English system font
body {
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}| Font | OS |
|---|---|
-apple-system |
OS X (10.11+), iOS (9+) |
BlinkMacSystemFont |
OS X, Chrome |
Segoe UI |
Windows |
Roboto |
Android 4.0+ |
Oxygen |
Linux, KDE |
Ubuntu |
Linux, Ubuntu |
Cantarell |
Linux, GNOME |
Fira Sans |
Firefox OS |
Droid Sans |
Android (until 3.2) |
Helvetica Neue |
OS X (10.9) |
영어권의 시스템 글꼴은 쉽게 찾을 수가 있습니다. 어떻게 좋다 싫다 보다는 거의 고정에 가깝게 나와 있습니다.
Portal site
이제 한글을 쓰는 우리나라의 몇몇 포털의 사이트에는 어떤 글꼴을 사용하는지 보겠습니다.
네이버 font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
네이버 모바일 font-family: "Helvetica Neue","Apple SD Gothic Neo",sans-serif;
다음 font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
다음 모바일 font-family: HelveticaNeue-Light,AppleSDGothicNeo-Light,'Malgun Gothic','맑은 고딕',sans-serif;
네이트 font-family: AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;
ZUM font-family: HelveticaNeue-Regular,AppleSDGothicNeo-Regular,dotum,"돋움",sans-serif;
ZUM 모바일 font-family: HelveticaNeue-light,AppleSDGothicNeo-light,sans-serif;
MSN font-family: "segoe ui","malgun gothic","microsoft neogothic",applegothic,sans-serif;포털사이트의 메인 <body>기준으로 적은 것입니다. 네이트와 MSN모바일은 css 못찾았습니다.
OS별 시스템 폰트
Windows XP : 굴림
Windows Vista, 7, 8, 10 : 맑은 고딕
OS X 라이언 (10.8) : 애플 고딕
OS X 마운틴 라이언 (10.9) : 애플 산돌 고딕 네오
Ubuntu : 나눔고딕
Android 4.4 이전 - Droid Sans fallback (고딕)
Android 4.4 이후 - 나눔고딕
Android 5.0 이상(롤리팝) – 본고딕 (Noto Sans)
iOS 5.x 이하 - 애플 고딕
iOS 6.x - 애플 산돌 고딕 네오 (일반체와 볼드체)
iOS 7.x - 애플 산돌 고딕 네오 (100 ~ 900)
윈도우 폰 - 마이크로소프트 네오 고딕폰트 적용 방법
각각의 사용자를 위해서 font-family에 해당 운영체제에서 지원하는 폰트를 넣어줍니다.
참고로 웬만해서는 폰트들의 이름을 영어로 적어 줍니다. 그리고 애플 고딕 같은 경우 구버전 운영체제에서는 지원폰트가 없으면 한글은 무조건 애플 고딕으로 표기가 되기 때문에 따로 넣을 필요 없습니다. 혹시나 Apple Gothic을 기본 폰트로 스킨에 넣을 경우에는 제거하는 것을 권장합니다. 왜냐면 OS X 10.9이상에서는 네오고딕이 Systemwide로 기본적용 되나 만약 font-family에 AppleGothic이 있으면 해당 폰트가 적용되어버리기 때문에 가독성에 심각한 영향을 줍니다.
순서정하기
- Helvetica - 헬베티카
- 맑은 고딕, malgun gothic - 원도우
- "Apple SD Gothic Neo", Apple SD 산돌고딕 Neo - OS X
- Microsoft NeoGothic - 원도우폰
- Droid sans - 구형 안드로이드
윈도를 정하면서 이제는 XP는 사용하는 분들이 있나 싶어 빼버렸고, OS X에 맞춰서 Apple SD 산돌 고딕 Neo를 추가해주고, 윈도폰을 위해서 네오고딕을 추가해줍니다. 혹시 구형 안드로이드를 위해 Droid sans도 추가합니다.
결론은
body { font-family: Helvetica,
'맑은 고딕', 'malgun gothic',
'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo',
'Microsoft NeoGothic',
'Droid sans', sans-serif;
}헬베티카를 처음으로 넣으면 다른 한글과의 약간의 이질감이 있지만 그것 또한 디자인이다 싶어 넣었습니다.
