시스템 통합 글꼴 -𝚊𝚙𝚙𝚕𝚎-𝚜𝚢𝚜𝚝𝚎𝚖

가독성을 고려하신다고요?

 

이제는 css 시스템에

다음 한 줄만 추가하면 됩니다.

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

 

이 폰트 패밀리는 거의 모든 디바이스에서 반응하며, 상당히 유려하게 작용합니다.

 

주로 GitHub, Wordpress, Bootstrap, Medium, Ghost, 그 외에도 다양한 곳에서 사용되는데요.

 

이것을 사용하는 주된 이유는 바로 이들이 "시스템" 폰트로서 작용하기 때문입니다. 웹사이트 로딩을 무겁게 하는 주 원인 중 하나는 폰트인데요. 이미 유저들의 디바이스 안에 내장되어 있는 폰트라면, 로딩하는 속도도 빠를 것이고 용량도 적게 차지할 수 있습니다. 이들 아름다운 시스템 폰트는 현재 사용되고 있는 OS에 매치되며, 그래서 보기에 시각적으로 편안함을 줍니다.

• -apple-system은 사파리에 내장되어 있는 San Francisco(Mac OS X 및 iOS)를 대체하며, Neue Helvetica와 Mac OS X에서 더 이전 버전의 Lucida Grande를 타깃으로 합니다. 이 폰트는 사이즈에 따라 적절하게 San Francisco Text와 San Francisco Display를 선별하여 적용됩니다.
• system-ui 폰트의 경우 플랫폼 별로 주어진 디폴트 UI 폰트 값을 표현하게 되어 있습니다.
• BlinkMacSystemFont는 Mac OS X에서 Chrome을 디스플레잉할 때 보여지는 글꼴입니다.
• Segoe UI는 Windows나 Windows Phone에서 나타나는 글꼴입니다.
• Roboto는 Android와 신형 Chrome OS에서 나타나는 글꼴입니다. 이 글꼴은 일부러 Segoe UI 폰트 바로 뒤로 배치되었는데, 그래서 만약 당신이 윈도우에 안드로이드 개발자를 설치한 경우라면 Segoe UI 글꼴로 대신 표현될 것입니다.

 

더 자세한 글을 보려면 여기를 방문해주세요.