[css] 웹 페이지에서 Apple의 새로운 San Francisco 글꼴을 사용하는 방법

Apple의 새 시스템 글꼴은 공개되지 않습니다. Apple은 시스템 글꼴 이름 추상화를 시작했습니다.

이 추상화의 동기는 운영 체제가 주어진 가중치에서 사용할 얼굴을 더 잘 선택할 수 있도록하기위한 것입니다. Apple은 또한 선택 가능한 “6”및 “9”글리프 또는 비 고정 폭 숫자와 같은 글꼴 기능을 연구하고 있습니다. 이러한 기능을 웹에도 적용하고 싶어하는 것 같습니다.

Safari와 Firefox는 SF를 사용합니다 -apple-system. Chrome은 BlinkMacSystemFont다음을 인식합니다 .

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

다른 변형도 있습니다.

font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

다음 바이올린에서이를 시연 할 수 있습니다. 대부분은 아직 지원되지 않습니다 : http://jsfiddle.net/v94gw9nx/

글꼴 사용에 대한 많은 훌륭한 정보가있는 Craig Hockenberry의 기사에서 내 정보를 얻었습니다.
http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

또한 추상화 된 시스템 글꼴 사용에 대한 Surfin ‘Safari 블로그의 유용한 정보 : https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

그리고 분명히 애플은 CSS에서 일반적인 “시스템”글꼴 이름을 사용하여 표준화하기 위해 W3C와 협력하고 있습니다. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

개인적인 용도로 SF 글꼴 .otf 파일을 다운로드하십시오 : https://developer.apple.com/fonts/

답변

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

font-family: -apple-system, system-ui, BlinkMacSystemFont;

font-family: -apple-system, BlinkMacSystemFont;

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;

font-family: -apple-system, BlinkMacSystemFont, sans-serif;

font-family: 'BlinkMacSystemFont';

body
{
  font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}