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

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

---

사이트에서 새로운 San Francisco 글꼴을 사용하고 싶습니다. 난 노력 했어:

font: 'San Francisco', Helvetica, Arial, san-serif;

아무 소용이 없습니다. 나는에 대한 답변 시도 이 질문을 하지만, @font-face여기에 해결책이 아니다.

---

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의 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-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 / 는 세부 사항을 잘 설명합니다.

---

마지막 테스트 시간 : 2018 년 3 월

---

질문에 답하기 위해

How to use Apple's new San Francisco font on a webpage

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

or (even shorter):

font-family: -apple-system, BlinkMacSystemFont;

should suffice.

If you want to default to system font on multiple platforms, though, I'd suggest:

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

• -apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
• system-ui — default UI font on a given platform.
• BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
• "Segoe UI" — Windows (Vista+) and Windows Phone.
• Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
• Ubuntu — all versions of Ubuntu.

The idea is borrowed from the following issue on github.

You can look up fonts for other OS or older versions of them in this article on css-tricks.

---

If the user is running El Capitan or higher, it will work in Chrome with

font-family: 'BlinkMacSystemFont';

---

Apple is abstracting the system fonts going forward. This facility uses new generic family name -apple-system. So something like below should get you what you want.

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

---

Last tested in 2015

Should use this solution as a last choice, when other solutions don't work.

---

Original answer:

Work on macOS Chrome/Safari

body { font-family: '.SFNSDisplay-Regular', sans-serif; }

---

This is an update to this rather old question. I wanted to use the new SF Pro fonts on a website and found no fonts CDN, besides the above noted (applesocial.s3.amazonaws.com).

Clearly, this isn't an official content repository approved by Apple. Actually, I did not find ANY official fonts repository serving Apple fonts, ready to be used by web developers.

And there's a reason - if you read the license agreement that comes with downloading the new SF Pro and other fonts from https://developer.apple.com/fonts/ - it states in the first few paragraphs very clearly:

[...]you may use the Apple Font solely for creating mock-ups of user interfaces to be used in software products running on Apple’s iOS, macOS or tvOS operating systems, as applicable. The foregoing right includes the right to show the Apple Font in screen shots, images, mock-ups or other depictions, digital and/or print, of such software products running solely on iOS, macOS or tvOS.[...]

And:

Except as expressly provided for herein, you may not use the Apple Font to, create, develop, display or otherwise distribute any documentation, artwork, website content or any other work product.

Further:

Except as otherwise expressly permitted [...] (i) only one user may use the Apple Font at a time, and (ii) you may not make the Apple Font available over a network where it could be run or used by multiple computers at the same time.

No more questions for me. Apple clearly does not want their Fonts shared across the web outside their products.

참고URL : https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage