Tôi muốn sử dụng phông chữ San Francisco mới trên một trang web. Tôi đã thử:

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

không có kết quả. Tôi đã thử các câu trả lời cho câu hỏi này , nhưng @font-facekhông phải là giải pháp ở đây.

Phông chữ hệ thống mới của Apple không được công khai. Apple đã bắt đầu trừu tượng hóa tên phông chữ hệ thống:

Động lực cho sự trừu tượng này là để hệ điều hành có thể đưa ra lựa chọn tốt hơn về mặt nào sẽ sử dụng ở một trọng lượng nhất định. Apple cũng đang nghiên cứu các tính năng về phông chữ, chẳng hạn như glyphs có thể lựa chọn “6 ″ và“ 9 ″ hoặc các số không liền mạch. Tôi đoán rằng họ cũng muốn đưa những tính năng này lên web.

Safari và Firefox sử dụng SF cho -apple-system; Chrome nhận dạng BlinkMacSystemFont:

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

Ngoài ra còn có các biến thể khác:

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

Bạn có thể demo chúng tại fiddle sau; hầu hết chưa được hỗ trợ: http://jsfiddle.net/v94gw9nx/

Tôi lấy thông tin của mình từ bài báo của Craig Hockenberry có rất nhiều thông tin tuyệt vời về việc sử dụng phông chữ: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

Ngoài ra, một số thông tin tuyệt vời trên blog Surfin 'Safari về cách sử dụng phông chữ hệ thống trừu tượng: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/

Và dường như Apple đang làm việc với W3C để chuẩn hóa bằng cách sử dụng tên phông chữ "hệ thống" chung trong CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

Tải xuống tệp .otf phông chữ SF để sử dụng cá nhân của riêng bạn: https://developer.apple.com/fonts/

Không có câu trả lời hiện tại nào kể cả câu được chấp nhận sẽ sử dụng phông chữ San Francisco của Apple trên các hệ thống chưa cài đặt nó làm phông chữ hệ thống. Vì câu hỏi không phải là "làm cách nào để sử dụng phông chữ hệ thống OS X trên trang web" nên giải pháp chính xác là sử dụng phông chữ web:

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

Nguồn

Thử nghiệm lần cuối: tháng 3 năm 2018

Để giải quyết câu hỏi

Cách sử dụng phông chữ San Francisco mới của Apple trên trang web

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

hoặc (thậm chí ngắn hơn):

font-family: -apple-system, BlinkMacSystemFont;

nên đủ.

Tuy nhiên, nếu bạn muốn đặt mặc định thành phông chữ hệ thống trên nhiều nền tảng, tôi khuyên bạn nên:

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

• -apple-system- San Francisco trong Safari (trên Mac OS X và iOS); Neue Helvetica và Lucida Grande trên các phiên bản Mac OS X.
• system-ui - phông chữ giao diện người dùng mặc định trên một nền tảng nhất định.
• BlinkMacSystemFont- tương đương với -apple-system, dành cho Chrome trên Mac OS X.
• "Segoe UI" - Windows (Vista +) và Windows Phone.
• Roboto - Android (Ice Cream Sandwich (4.0) +) và Chrome OS.
• Ubuntu - tất cả các phiên bản của Ubuntu.

Ý tưởng được mượn từ số báo sau trên github .

Bạn có thể tra cứu phông chữ cho hệ điều hành khác hoặc các phiên bản cũ hơn của chúng trong bài viết này về thủ thuật css .

-apple-system cho phép bạn chọn San Francisco trong Safari. BlinkMacSystemFont là giải pháp thay thế tương ứng cho Chrome.

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

Roboto hoặc Helvetica Neue có thể được chèn làm dự phòng ngay cả trước sans-serif.

https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (cách hoặc trước đây là http://furbo.org/2015/07/ 09 / i-left-my-system-font-in-san-francisco / làm rất tốt việc giải thích các chi tiết.

Nếu người dùng đang chạy El Capitan trở lên, nó sẽ hoạt động trong Chrome với

font-family: 'BlinkMacSystemFont';

Apple đang trừu tượng hóa các phông chữ hệ thống trong tương lai. Cơ sở này sử dụng tên họ chung mới -apple-system. Vì vậy, một cái gì đó như dưới đây sẽ mang lại cho bạn những gì bạn muốn.

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

Đây là bản cập nhật cho câu hỏi khá cũ này. Tôi muốn sử dụng phông chữ SF Pro mới trên một trang web và không tìm thấy phông chữ CDN nào, ngoài những phông chữ được lưu ý ở trên (appleocial.s3.amazonaws.com).

Rõ ràng, đây không phải là kho lưu trữ nội dung chính thức được Apple phê duyệt. Trên thực tế, tôi không tìm thấy BẤT KỲ kho lưu trữ phông chữ chính thức nào phục vụ các phông chữ của Apple, sẵn sàng để các nhà phát triển web sử dụng.

Và có một lý do - nếu bạn đọc thỏa thuận cấp phép đi kèm với việc tải xuống SF Pro mới và các phông chữ khác từ https://developer.apple.com/fonts/ - nó nêu rõ trong một vài đoạn đầu tiên:

[...] bạn chỉ có thể sử dụng Phông chữ Apple để tạo mô phỏng giao diện người dùng được sử dụng trong các sản phẩm phần mềm chạy trên hệ điều hành iOS, macOS hoặc tvOS của Apple, nếu có. Quyền nói trên bao gồm quyền hiển thị Phông chữ Apple trong ảnh chụp màn hình, hình ảnh, mô phỏng hoặc mô tả khác, kỹ thuật số và / hoặc bản in, của các sản phẩm phần mềm chỉ chạy trên iOS, macOS hoặc tvOS. […]

Và:

Trừ khi được cung cấp rõ ràng ở đây, bạn không được sử dụng Phông chữ Apple để tạo, phát triển, hiển thị hoặc phân phối bất kỳ tài liệu, tác phẩm nghệ thuật, nội dung trang web hoặc bất kỳ sản phẩm công việc nào khác.

Thêm nữa:

Trừ khi được cho phép một cách rõ ràng [...] (i) chỉ một người dùng có thể sử dụng Phông chữ Apple tại một thời điểm và (ii) bạn không thể cung cấp Phông chữ Apple qua mạng nơi nó có thể được chạy hoặc sử dụng bởi nhiều máy tính đồng thời.

Không có thêm câu hỏi cho tôi. Apple rõ ràng không muốn Phông chữ của họ được chia sẻ trên web bên ngoài các sản phẩm của họ.

Bạn không thể sử dụng Phông chữ Hệ thống của Apple được cung cấp trực tiếp từ cơ sở dữ liệu. Nó chống lại Giấy phép, nhưng bạn có thể sử dụng điều này cho Hệ thống Mac cao hơn High Sierra

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

Hoặc bạn có thể sử dụng cái này:

font-family: 'BlinkMacSystemFont';

Thử nghiệm lần cuối vào năm 2015

Nên sử dụng giải pháp này như một lựa chọn cuối cùng, khi các giải pháp khác không hiệu quả.

Câu trả lời ban đầu:

Làm việc trên macOS Chrome / Safari

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