CSS 기본 시스템 폰트 설정 (2019)

 

각 운영체제 별로 기본 시스템 폰트를 로드하는 CSS 코드. 영문 시스템 폰트를 로드하는 것을 기본으로 되어 있기에 특정 국가에 대한 폰트 설정을 목표로 한다면, 폰트 리스트를 추가적/구체적으로 정의해줄 필요가 있다. 운영체제가 업그레이드되면서 기본 시스템 폰트가 변경되는 경우가 있기 때문에, 이 경우에도 새로운 폰트로 정의하는 작업이 필요하다.

CSS 코드

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

코드 해석

  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Sass Variable

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

기본으로 sans-serif 서체 불러오기

위 설정보다 조금 더 간결한 방식은 다음과 같다. 다만 이 경우는 시스템폰트를 불러온다기 보다는 기본적으로 설정된 sans-serif 폰트를 불러오는 격인데, 다른 시스템 폰트가 있더라도 아래 정의된 해당 폰트들이 설치되어 있으면 시스템 폰트가 아닌 해당 폰트를 불러오게 된다.

font-family:Helvetica,Arial,sans-serif;