답변:
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/
-apple-systemCSS를 통해이를 지원합니다 font-variant-numeric: tabular-nums;.
.SF NS Text그리고 .SF NS Display지금,하지만 당신은 사람들을 사용할 수 없습니다. 나는 -apple-system. SF Text/ SF Pro글꼴을 수동으로 설치 한 경우에만 작동합니다.
-system-uiChrome과 Safari의 새로운 표준 방식입니다. (난 그냥 코멘트에 이러는거야 귀하의 멋진 대답에서 신용을 훔치는 싶지 않았다. furbo.org/2018/03/28/system-fonts-in-css를 )
허용되는 답변을 포함한 현재 답변 은 시스템 글꼴로 설치되지 않은 시스템에서 Apple의 San Francisco 글꼴을 사용하지 않습니다. 질문이 "웹 페이지에서 OS X 시스템 글꼴을 사용하는 방법"이 아니기 때문에 올바른 해결책은 웹 글꼴을 사용하는 것입니다.
@font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}질문에 답하기 위해
웹 페이지에서 Apple의 새로운 San Francisco 글꼴을 사용하는 방법
font-family: -apple-system, system-ui, BlinkMacSystemFont;또는 (더 짧게) :
font-family: -apple-system, BlinkMacSystemFont;충분합니다.
하지만 여러 플랫폼에서 시스템 글꼴을 기본값으로 사용하려면 다음을 제안합니다.
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;-apple-system— San Francisco in Safari (Mac OS X 및 iOS) 이전 버전의 Mac OS X에서 Neue Helvetica 및 Lucida Grande.system-ui — 주어진 플랫폼의 기본 UI 글꼴.BlinkMacSystemFont— -apple-systemMac OS X 용 Chrome 의 경우 와 동일합니다."Segoe UI" — Windows (Vista +) 및 Windows Phone.Roboto — Android (Ice Cream Sandwich (4.0) +) 및 Chrome OS.Ubuntu — 모든 버전의 Ubuntu.아이디어는 github 의 다음 문제에서 빌려온 것입니다 .
css-tricks에 대한 이 문서에서 다른 OS 또는 이전 버전의 글꼴을 찾을 수 있습니다 .
-apple-system을 사용하면 Safari에서 샌프란시스코를 선택할 수 있습니다. BlinkMacSystemFont는 Chrome에 해당하는 대안입니다.
font-family: -apple-system, BlinkMacSystemFont, sans-serif;Roboto 또는 Helvetica Neue는 sans-serif 이전에도 폴백으로 삽입 될 수 있습니다.
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (어떻게 또는 이전에 http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / 는 세부 사항을 잘 설명합니다.
사용자가 El Capitan 이상을 실행하는 경우 Chrome 에서
font-family: 'BlinkMacSystemFont';Apple은 앞으로 시스템 글꼴을 추상화하고 있습니다. 이 시설은 새로운 일반 제품군 이름 인 apple-system을 사용합니다. 그래서 아래와 같은 것이 당신이 원하는 것을 얻을 것입니다.
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}이것은 다소 오래된 질문에 대한 업데이트입니다. 나는 웹 사이트에서 새로운 SF Pro 글꼴을 사용하고 싶었고 위에서 언급 한 것 외에 CDN 글꼴을 찾지 못했습니다 (applesocial.s3.amazonaws.com).
분명히 이것은 Apple에서 승인 한 공식 콘텐츠 저장소가 아닙니다. 사실 웹 개발자가 사용할 준비가 된 Apple 글꼴을 제공하는 공식 글꼴 저장소를 찾지 못했습니다.
그리고 https://developer.apple.com/fonts/ 에서 새로운 SF Pro 및 기타 글꼴을 다운로드 할 때 제공되는 라이센스 계약을 읽어 보면 처음 몇 단락에 매우 명확하게 설명되어 있습니다.
[...] 해당되는 경우 Apple의 iOS, macOS 또는 tvOS 운영 체제에서 실행되는 소프트웨어 제품에서 사용할 사용자 인터페이스의 모형을 만드는 데에만 Apple 글꼴을 사용할 수 있습니다. 전술 한 권리에는 iOS, macOS 또는 tvOS에서만 실행되는 소프트웨어 제품의 스크린 샷, 이미지, 모형 또는 기타 묘사, 디지털 및 / 또는 인쇄물에 Apple 글꼴을 표시 할 수있는 권리가 포함됩니다. [...]
과:
여기에 명시 적으로 제공된 경우를 제외하고 Apple 글꼴을 사용하여 문서, 아트 워크, 웹 사이트 콘텐츠 또는 기타 작업 제품을 생성, 개발, 표시 또는 배포 할 수 없습니다.
더욱이:
달리 명시 적으로 허용 된 경우를 제외하고 [...] (i) 한 번에 한 명의 사용자 만 Apple 글꼴을 사용할 수 있으며 (ii) 여러 컴퓨터에서 실행하거나 사용할 수있는 네트워크를 통해 Apple 글꼴을 사용할 수 없도록 할 수 있습니다. 동시에.
더 이상 질문이 없습니다. 애플은 분명히 그들의 글꼴이 제품 외부에서 웹을 통해 공유되는 것을 원하지 않습니다.
데이터베이스에서 직접 제공되는 Apple 시스템 글꼴을 사용할 수 없습니다. 라이센스에 위배되지만 High Sierra보다 높은 Mac 시스템에서 사용할 수 있습니다.
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}또는 이것을 사용할 수 있습니다.
font-family: 'BlinkMacSystemFont';다른 솔루션이 작동하지 않는 경우이 솔루션을 마지막 선택으로 사용해야합니다.
원래 답변 :
macOS Chrome / Safari에서 작업
body { font-family: '.SFNSDisplay-Regular', sans-serif; }-apple-system, 'BlinkMacSystemFont'iOS Chrome + Safari 및 OS X Chrome + Safari에서 작동 하는 동안 iOS에서는 작동 하지 않습니다 .