114

ฉันต้องการใช้แบบอักษรใหม่ของ San Francisco บนไซต์ ฉันพยายามแล้ว:

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

ไม่มีประโยชน์ ฉันได้ลองตอบคำถามนี้แล้ว แต่@font-faceไม่ใช่วิธีแก้ปัญหาที่นี่

css

— อนินทรีย์
แหล่งที่มา

1

แบบอักษรของเว็บไซต์ขึ้นอยู่กับสิ่งที่ติดตั้งในระบบของผู้ใช้หรือโหลดจากภายนอก เป็นสิ่งที่ค่อนข้างตรงไปตรงมาโดยเฉพาะอย่างยิ่งถ้าแบบอักษรนั้นพร้อมใช้งาน

— Sparky

210

แบบอักษรระบบใหม่ของ 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/

และเห็นได้ชัดว่า Apple กำลังทำงานร่วมกับ W3C เพื่อสร้างมาตรฐานโดยใช้ชื่อแบบอักษร "ระบบ" ทั่วไปใน CSS https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

ดาวน์โหลดไฟล์แบบอักษร SF. otf สำหรับการใช้งานส่วนตัวของคุณเอง: https://developer.apple.com/fonts/

— อนินทรีย์
แหล่งที่มา

หรือคุณสามารถใช้ชื่อแบบอักษรเช่นSanFranciscoText-Regular

4

ถ้าจำเป็นต้องพิมพ์ดีดตัวเลขสำหรับการแสดงในตารางที่-apple-systemยังสนับสนุนนี้ผ่านทาง font-variant-numeric: tabular-nums;CSS

— Palimondo

@ j08691, ใบอนุญาตคืออะไร?

— Pacerier

1

@BryanBryce นั่นเป็นการแฮ็คของ El Cap มันใช้ไม่ได้แล้วฉันคิดว่ามันถูกเรียก.SF NS Textและ.SF NS Displayตอนนี้ แต่คุณไม่ควรใช้สิ่งเหล่านี้ ฉันจะใช้-apple-system. SF Text/ SF Proทำงานเฉพาะเมื่อคุณติดตั้งแบบอักษรด้วยตนเอง

1

เห็นได้ชัดว่า-system-uiเป็นวิธีมาตรฐานใหม่บน Chrome และ Safari (ฉันไม่ต้องการขโมยเครดิตจากคำตอบที่ยอดเยี่ยมของคุณดังนั้นฉันแค่ใส่สิ่งนี้ในความคิดเห็นfurbo.org/2018/03/28/system-fonts-in-css )

— Wil Shipley

66

ไม่มีคำตอบใดในปัจจุบันรวมถึงคำตอบที่ยอมรับจะใช้แบบอักษร San Francisco ของ Apple ในระบบที่ไม่ได้ติดตั้งเป็นแบบอักษรของระบบ เนื่องจากคำถามไม่ใช่ "ฉันจะใช้แบบอักษรระบบ 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");
}

ที่มา

— อิเลียสคาริม
แหล่งที่มา

3

ถ้าใครอยากได้ตัวหนา: sanfranciscodisplay-bold-webfont.woff

— Snow Bases

11

หมายเหตุ: คำตอบนี้ละเมิดข้อกำหนดสิทธิ์การใช้งานแบบอักษรของ Appleซึ่งระบุว่า"[... ] คุณสามารถใช้แบบอักษรของ Apple เพื่อสร้างอินเทอร์เฟซผู้ใช้จำลองเพื่อใช้ในผลิตภัณฑ์ซอฟต์แวร์ที่ทำงานบน iOS, iPadOS, macOS หรือ tvOS ของ Apple เท่านั้น ระบบปฏิบัติการตามความเหมาะสม " .

— Teh

36

ทดสอบครั้งล่าสุด: มีนาคม 2018

เพื่อตอบคำถาม

วิธีใช้แบบอักษร San Francisco ใหม่ของ Apple บนหน้าเว็บ

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 ใน Safari (บน Mac OS X และ iOS); Neue Helvetica และ Lucida Grande บน Mac OS X เวอร์ชันเก่า
system-ui - แบบอักษร UI เริ่มต้นบนแพลตฟอร์มที่กำหนด
BlinkMacSystemFont- เทียบเท่า-apple-systemสำหรับ Chrome บน Mac OS X
"Segoe UI" - Windows (Vista +) และ Windows Phone
Roboto - Android (Ice Cream Sandwich (4.0) +) และ Chrome OS
Ubuntu - Ubuntu ทุกรุ่น

ความคิดที่จะยืมมาจากต่อไปนี้ปัญหาบน GitHub

คุณสามารถค้นหาแบบอักษรสำหรับ OS อื่นหรือเวอร์ชันเก่ากว่าได้ในบทความเกี่ยวกับ css-Tricksนี้

แน่ใจหรือว่านี่คือซานฟรานซิสโกที่ใช้สำหรับการเรนเดอร์บน iOS? บน iOS 12 (Simulator) ไม่เหมือน บน iOS 13 ดูเหมือนว่ามัน แต่ไม่ได้ร่ายมนตร์ทั้งหมดที่มีอยู่

— Fabien Snauwaert

@FabienSnauwaert ไม่ฉันไม่แน่ใจเกี่ยวกับ iOS 12 และ 13 นั่นเป็นเหตุผลว่าทำไมฉันจึงเพิ่มวันที่ไว้ด้านบนของคำตอบ (เช่นตอนนี้คำตอบมีอายุมากกว่า 2 ปีและถูกโพสต์ก่อนที่ iOS 12 จะประกาศด้วยซ้ำ)

26

-apple-system ช่วยให้คุณเลือก San Francisco ใน 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-font-in-san-francisco /ทำงานได้ดีมากในการอธิบายรายละเอียด

— Andreas Kwiatkowski
แหล่งที่มา

10

หากผู้ใช้ใช้ El Capitan ขึ้นไปผู้ใช้จะทำงานในChromeด้วย

font-family: 'BlinkMacSystemFont';

— เบนจามิน
แหล่งที่มา

3

คุณมีลิงค์ไปยังเอกสารที่เป็นทางการ (หรืออื่น ๆ ) เกี่ยวกับเรื่องนี้หรือไม่?

— Moshe Katz

4

Apple กำลังแยกแบบอักษรของระบบในอนาคต สิ่งอำนวยความสะดวกนี้ใช้ชื่อสกุลทั่วไปใหม่ -apple-system ดังนั้นสิ่งที่ต้องการด้านล่างควรทำให้คุณได้รับสิ่งที่คุณต้องการ

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

— dors
แหล่งที่มา

ผ้าใบ HTML ล่ะ

— clearlight

4

นี่เป็นการอัปเดตสำหรับคำถามที่ค่อนข้างเก่านี้ ฉันต้องการใช้แบบอักษร SF Pro ใหม่บนเว็บไซต์และไม่พบแบบอักษร CDN นอกเหนือจากที่ระบุไว้ข้างต้น (applesocial.s3.amazonaws.com)

เห็นได้ชัดว่านี่ไม่ใช่ที่เก็บเนื้อหาอย่างเป็นทางการที่ Apple รับรอง อันที่จริงฉันไม่พบที่เก็บฟอนต์ทางการใด ๆ ที่ให้บริการฟอนต์ของ Apple พร้อมให้นักพัฒนาเว็บใช้

และมีเหตุผล - หากคุณอ่านข้อตกลงใบอนุญาตที่มาพร้อมกับการดาวน์โหลด SF Pro ใหม่และแบบอักษรอื่น ๆ จากhttps://developer.apple.com/fonts/ - จะระบุไว้ในสองสามย่อหน้าแรกอย่างชัดเจน:

[... ] คุณสามารถใช้แบบอักษรของ Apple เพื่อสร้างอินเทอร์เฟซผู้ใช้จำลองเพื่อใช้ในผลิตภัณฑ์ซอฟต์แวร์ที่ทำงานบนระบบปฏิบัติการ iOS, macOS หรือ tvOS ของ Apple เท่านั้นตามความเหมาะสม สิทธิ์ดังกล่าวข้างต้นรวมถึงสิทธิ์ในการแสดงแบบอักษรของ Apple ในภาพหน้าจอรูปภาพจำลองหรือภาพอื่น ๆ ดิจิทัลและ / หรือการพิมพ์ของผลิตภัณฑ์ซอฟต์แวร์ดังกล่าวที่ทำงานบน iOS, macOS หรือ tvOS เท่านั้น [... ]

และ:

ยกเว้นที่ระบุไว้โดยชัดแจ้งในที่นี้คุณไม่สามารถใช้แบบอักษรของ Apple เพื่อสร้างพัฒนาแสดงหรือแจกจ่ายเอกสารงานศิลปะเนื้อหาเว็บไซต์หรือผลิตภัณฑ์งานอื่น ๆ ได้

เพิ่มเติม:

ยกเว้นได้รับอนุญาตอย่างชัดแจ้งเป็นอย่างอื่น [... ] (i) ผู้ใช้เพียงคนเดียวเท่านั้นที่สามารถใช้แบบอักษรของ Apple ได้ในแต่ละครั้งและ (ii) คุณไม่สามารถทำให้แบบอักษรของ Apple พร้อมใช้งานบนเครือข่ายที่คอมพิวเตอร์หลายเครื่องสามารถเรียกใช้หรือใช้งานได้ ในเวลาเดียวกัน.

ไม่มีคำถามเพิ่มเติมสำหรับฉัน เห็นได้ชัดว่า Apple ไม่ต้องการให้แบบอักษรของพวกเขาแชร์บนเว็บภายนอกผลิตภัณฑ์ของตน

— Jhohlfeld
แหล่งที่มา

3

ในคำตอบที่ยอมรับคุณจะเห็นว่าเราไม่ได้ให้บริการเว็บฟอนต์ของ Apple เรากำลังบอกให้เบราว์เซอร์ใช้แบบอักษรของระบบ Apple ซึ่งปัจจุบันคือ SF คุณไม่สามารถให้บริการ SFPro ได้อย่างแน่นอน แต่คุณสามารถระบุได้ว่าจะใช้สำหรับผู้ที่มีอุปกรณ์ Apple

— inorganik

4

คุณไม่สามารถใช้ Apple System Font ที่ให้บริการโดยตรงจากฐานข้อมูล ผิดสัญญาอนุญาต แต่คุณสามารถใช้สิ่งนี้สำหรับระบบ Mac ที่สูงกว่า High Sierra

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

หรือคุณสามารถใช้สิ่งนี้:

font-family: 'BlinkMacSystemFont';

— theroyakash
แหล่งที่มา

2

ทดสอบครั้งล่าสุดในปี 2558

ควรใช้โซลูชันนี้เป็นทางเลือกสุดท้ายเมื่อโซลูชันอื่นไม่ได้ผล

คำตอบเดิม:

ทำงานบน macOS Chrome / Safari

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

— บัมโฟ
แหล่งที่มา

1

การบล็อกโค้ดเพียงอย่างเดียวไม่ได้ให้คำตอบที่ดี กรุณาเพิ่มคำอธิบาย

— Louis Barranqueiro

1

นี่เป็นสิ่งเดียวที่ใช้ได้กับฉันในสไตล์ชีตไวยากรณ์ Atom

— ไก่

2

โปรดทราบว่าสิ่งนี้ใช้ไม่ได้ใน iOS ในขณะที่-apple-system, 'BlinkMacSystemFont'ทำงานใน iOS Chrome + Safari และ OS X Chrome + Safari

— Charlie Schliesser

1

นอกจากนี้ฉันควรชี้ให้เห็นว่าสาเหตุที่สิ่งนี้ใช้ไม่ได้กับ iOS เป็นเพราะแบบอักษรของระบบขึ้นต้นด้วย. SFNS บน macOS ในขณะที่เริ่มต้นด้วย. FUI บน iOS หากคุณต้องทำด้วยเหตุผลบางประการอย่างแน่นอนนั่นจะแก้ไขได้ ... แต่อย่าทำ!

— โจนาธาน ธ อร์นตัน

1

ขอบคุณฉันได้ใช้มันกับแบบอักษร SF และใช้งานได้ดี ปัญหาเกี่ยวกับ -apple-system ถูกนำไปใช้ในเนื้อหาทั้งหมดและลบล้างรูปแบบของตระกูลแบบอักษร

— Hardik Darji