वेबपेज पर Apple के नए सैन फ्रांसिस्को फ़ॉन्ट का उपयोग कैसे करें

Question

मैं एक साइट पर नए सैन फ्रांसिस्को फ़ॉन्ट का उपयोग करना चाहता हूं। मैंने कोशिश की:

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

कोई फायदा नहीं। मैंने इस प्रश्न के उत्तर की कोशिश की है , लेकिन @font-faceयहाँ समाधान नहीं है।

Comments

वेबसाइट फोंट या तो उपयोगकर्ता के सिस्टम में स्थापित किए गए पर निर्भर करते हैं या वे बाहरी रूप से लोड किए जाते हैं। यह बहुत सीधा सामान है, खासकर अगर फ़ॉन्ट उपयोग के लिए उपलब्ध कराया गया है।

— स्पार्की

Answer 1

Apple का नया सिस्टम फ़ॉन्ट सार्वजनिक रूप से उजागर नहीं हुआ है। Apple ने सिस्टम फ़ॉन्ट नाम को अमूर्त करना शुरू कर दिया है:

इस अमूर्तता के लिए प्रेरणा इतनी है कि ऑपरेटिंग सिस्टम बेहतर विकल्प बना सकता है जिस पर दिए गए वजन का उपयोग करना है। Apple फ़ॉन्ट सुविधाओं पर भी काम कर रहा है, जैसे कि चयन करने योग्य "6" और "9" ग्लिफ़ या गैर-मोनोपॉज़्ड संख्या। यह मेरा अनुमान है कि वे इन सुविधाओं को वेब पर भी लाना चाहेंगे।

सफारी और फ़ायरफ़ॉक्स एसएफ के लिए उपयोग करते हैं -apple-system; क्रोम पहचानता है 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/

मुझे क्रेग होकेनबेरी के लेख से मेरी जानकारी मिली, जिसमें फ़ॉन्ट का उपयोग करने के बारे में बहुत अच्छी जानकारी है: http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/

इसके अलावा, सार प्रणाली फोंट का उपयोग करने के बारे में सर्फिन सफारी ब्लॉग पर कुछ बेहतरीन जानकारी: https://www.webkit.org/blog/3709/use-the-system-font-in-web-content/

और जाहिरा तौर पर Apple सीएसएस में एक सामान्य "सिस्टम" फ़ॉन्ट नाम का उपयोग करके मानकीकरण करने के लिए W3C के साथ काम कर रहा है। https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

अपने स्वयं के व्यक्तिगत उपयोग के लिए SF फ़ॉन्ट .otf फाइलें डाउनलोड करें: https://developer.apple.com/fonts/

Comments

या आप बस SanFranciscoText-Regular

यदि तालिका में प्रदर्शन के लिए मोनोस्पेस नंबर की आवश्यकता है, तो -apple-systemसीएसएस के माध्यम से भी इसका समर्थन करता है font-variant-numeric: tabular-nums;।

— पालिमोंडो

@ j08691, लाइसेंस क्या है?

— पचेरियर

@BryanBryce यह एल कैप के लिए एक हैक था। यह अब काम नहीं करता है, मुझे लगता है कि यह कहा जाता है .SF NS Textऔर .SF NS Displayअब है, लेकिन आपको उन का उपयोग नहीं करना चाहिए। मैं उपयोग करूंगा -apple-system। SF Text/ SF Proकेवल तभी काम करें जब आपके पास मैन्युअल रूप से स्थापित फ़ॉन्ट हो।

जाहिर तौर -system-uiपर क्रोम और सफारी पर नया मानक तरीका है। (मैं आपके भयानक जवाब से क्रेडिट चोरी नहीं करना चाहता था इसलिए मैं इसे टिप्पणियों में डाल रहा हूं। furbo.org/2018/03/28/system-fonts-in-css )

— Wil Shipley

Answer 2

स्वीकृत उत्तरों सहित कोई भी वर्तमान उत्तर Apple के सैन फ्रांसिस्को फ़ॉन्ट को उन सिस्टमों पर प्रयोग नहीं करेगा जिन्हें सिस्टम फ़ॉन्ट के रूप में स्थापित नहीं किया है। चूंकि सवाल यह नहीं है कि "मैं वेब पेज पर ओएस एक्स सिस्टम फॉन्ट का उपयोग कैसे करूं" वेब फोंट का उपयोग करने का सही समाधान है:

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

स्रोत

Comments

अगर किसी को एक बोल्ड चाहिए: sanfranciscodisplay-bold-webfont.woff

— स्नो बेस

नोट: यह उत्तर Apple के फ़ॉन्ट लाइसेंस शर्तों का उल्लंघन करता है , जिसमें कहा गया है कि "[...] आप Apple के iOS, iPadOS, macOS या tvOS पर चलने वाले सॉफ़्टवेयर उत्पादों में उपयोग किए जाने वाले उपयोगकर्ता इंटरफ़ेस के नकली-अप बनाने के लिए पूरी तरह से Apple फ़ॉन्ट का उपयोग कर सकते हैं ऑपरेटिंग सिस्टम, जैसा लागू हो ” ।

— तेह

Answer 3

अंतिम बार परीक्षण किया गया: मार्च 2018

---

प्रश्न को संबोधित करने के लिए

वेबपेज पर 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- सफारी में सैन फ्रांसिस्को (मैक ओएस एक्स और आईओएस पर); मैक ओएस एक्स के पुराने संस्करणों पर नुए हेल्वेटिका और लुसिडा ग्रांडे।
• system-ui - किसी दिए गए प्लेटफ़ॉर्म पर डिफ़ॉल्ट यूआई फ़ॉन्ट।
• BlinkMacSystemFont- -apple-systemमैक ओएस एक्स पर क्रोम के लिए बराबर।
• "Segoe UI" - विंडोज (विस्टा +) और विंडोज फोन।
• Roboto - एंड्रॉइड (आइस क्रीम सैंडविच (4.0) +) और क्रोम ओएस।
• Ubuntu - उबंटू के सभी संस्करण।

विचार को गितुब पर निम्नलिखित मुद्दे से उधार लिया गया है ।

आप सीएसएस-ट्रिक्स पर इस लेख में अन्य ओएस या उनमें से पुराने संस्करणों के लिए फोंट देख सकते हैं ।

Comments

क्या आपको यकीन है कि यह वास्तव में सैन फ्रांसिस्को है जिसका उपयोग आईओएस पर प्रतिपादन के लिए किया जा रहा है? IOS 12 (सिम्युलेटर) पर ऐसा नहीं दिखता है; iOS 13 पर यह ऐसा दिखता है, लेकिन सभी ग्लिफ़ उपलब्ध नहीं हैं ।

— फेबिन स्नूवर्ट

@FabienSnauwaert, नहीं, मुझे iOS 12 और 13. के बारे में निश्चित नहीं है, इसीलिए मैंने उत्तर के शीर्ष पर तारीख जोड़ी (यानी उत्तर अभी 2 साल से अधिक पुराना है, और iOS 12 की घोषणा से पहले पोस्ट किया गया था)।

Answer 4

-पल-सिस्टम आपको सफारी में सैन फ्रांसिस्को चुनने की अनुमति देता है। BlinkMacSystemFont Chrome के लिए संगत विकल्प है।

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

रॉबोटो या हेल्वेटिका नीयू को सेन्स-सेरिफ़ से पहले भी कमियां के रूप में डाला जा सकता है।

https://www.smashingmagazine.com/2015/11/use-system-ui-fonts-practical-guide/#details-of-approach-a (कैसे या पहले http://furbo.org/2015/07/ 09 / i-left-my-system-fonts-in-san-francisco / विवरणों को समझाते हुए एक बड़ा काम करें।

Answer 5

उपयोगकर्ता एल कैप्टन या उच्च चल रहा है, उस में काम करेंगे क्रोम के साथ

font-family: 'BlinkMacSystemFont';

Comments

क्या आपके पास इस बारे में किसी आधिकारिक (या अन्यथा) दस्तावेज का लिंक है?

— मोशे काटज़

Answer 6

Apple आगे चल रहे सिस्टम फोंट को अमूर्त कर रहा है। यह सुविधा नए सामान्य पारिवारिक नाम -पल-सिस्टम का उपयोग करती है। तो नीचे कुछ ऐसा होना चाहिए जो आपको चाहिए।

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

Comments

HTML कैनवास के बारे में क्या?

— स्पष्ट करें

Answer 7

यह इस पुराने प्रश्न के लिए एक अद्यतन है। मैं एक वेबसाइट पर नए एसएफ प्रो फोंट का उपयोग करना चाहता था और ऊपर उल्लिखित (applesocial.s3.amazonaws.com) के अलावा कोई फोंट सीडीएन नहीं मिला।

स्पष्ट रूप से, यह Apple द्वारा अनुमोदित आधिकारिक सामग्री भंडार नहीं है। वास्तव में, मुझे Apple फोंट की सेवा करने वाला कोई भी आधिकारिक फोंट रिपॉजिटरी नहीं मिला, जो वेब डेवलपर्स द्वारा उपयोग किए जाने के लिए तैयार है।

और एक कारण है - यदि आप नए एसएफ प्रो और https://developer.apple.com/fonts/ से नए फोंट डाउनलोड करने के साथ आने वाले लाइसेंस समझौते को पढ़ते हैं - यह पहले कुछ पैराग्राफ में बहुत स्पष्ट रूप से बताता है:

[...] आप Apple फ़ॉन्ट का उपयोग पूरी तरह से ऐप्पल के iOS, macOS या tvOS ऑपरेटिंग सिस्टम पर चल रहे सॉफ़्टवेयर उत्पादों में उपयोग किए जाने वाले यूज़र इंटरफेस के नकली-अप बनाने के लिए कर सकते हैं। पूर्वगामी अधिकार में स्क्रीन शॉट्स, चित्र, मॉक-अप या अन्य चित्रण, डिजिटल और / या प्रिंट में ऐप्पल फॉन्ट को दिखाने का अधिकार शामिल है, ऐसे सॉफ्टवेयर उत्पादों के केवल iOS, macOS या tvOS पर चल रहे हैं। […]

तथा:

यहाँ स्पष्ट रूप से उपलब्ध कराए जाने के अलावा, आप किसी भी प्रलेखन, कलाकृति, वेबसाइट सामग्री या किसी अन्य कार्य उत्पाद को वितरित करने, विकसित करने, प्रदर्शित करने या अन्यथा वितरित करने के लिए Apple फ़ॉन्ट का उपयोग नहीं कर सकते हैं।

आगे की:

को छोड़कर अन्यथा स्पष्ट रूप से अनुमति दी गई [...] (i) केवल एक उपयोगकर्ता एक समय में Apple फ़ॉन्ट का उपयोग कर सकता है, और (ii) आप Apple फ़ॉन्ट को ऐसे नेटवर्क पर उपलब्ध नहीं कर सकते हैं जहाँ इसे चलाया जा सकता है या कई कंप्यूटरों द्वारा उपयोग किया जा सकता है। एक ही समय में।

मेरे लिए और कोई सवाल नहीं। Apple स्पष्ट रूप से नहीं चाहता है कि उनके उत्पाद वेब के बाहर साझा किए गए उनके फ़ॉन्ट्स हों।

Comments

स्वीकृत उत्तर में आप देख सकते हैं कि हम Apple वेबफोन्स की सेवा नहीं कर रहे हैं, हम ब्राउज़र को Apple सिस्टम फ़ॉन्ट का उपयोग करने के लिए कह रहे हैं, जो वर्तमान में SF है। आप निश्चित रूप से SFPro की सेवा नहीं कर सकते हैं, लेकिन आप यह निर्दिष्ट कर सकते हैं कि इसका उपयोग Apple डिवाइस वाले लोगों के लिए किया जा सकता है।

— अकार्बनिक

Answer 8

आप किसी डेटाबेस से सीधे Apple सिस्टम फ़ॉन्ट का उपयोग नहीं कर सकते। यह लाइसेंस के खिलाफ है, लेकिन आप इसे मैक सिस्टम के लिए उच्च सिएरा की तुलना में अधिक उपयोग कर सकते हैं

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

या आप इसका उपयोग कर सकते हैं:

font-family: 'BlinkMacSystemFont';

Answer 9

आखिरी बार 2015 में परीक्षण किया गया था

इस समाधान को अंतिम विकल्प के रूप में उपयोग करना चाहिए, जब अन्य समाधान काम नहीं करते हैं।

---

मूल उत्तर:

MacOS Chrome / Safari पर कार्य करें

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

Comments

अकेले एक कोड ब्लॉक एक अच्छा जवाब नहीं देता है। कृपया स्पष्टीकरण जोड़ें।

— लुई बैरैंकेरियो

यह एकमात्र है जिसने मेरे लिए एटम सिंटैक्स स्टाइलशीट पर काम किया है।

— काई

ध्यान दें कि यह iOS में काम नहीं करता है जबकि -apple-system, 'BlinkMacSystemFont'iOS क्रोम + सफारी और ओएस एक्स क्रोम + सफारी में काम करता है।

— चार्ली श्लिसेर

इसके अलावा, मुझे इस बात पर ध्यान देना चाहिए कि आईओएस पर काम नहीं करने का कारण यह है कि सिस्टम फॉन्ट की शुरुआत एसओएसएफएस से होती है जबकि वे आईओएस पर .SFUI से शुरू करते हैं। आप तो बिल्कुल चाहिए किसी कारण से ऐसा करते हैं, कि इसे ठीक था ... लेकिन यह मत करो!

— जोनाथन थॉर्नटन

धन्यवाद, मैंने इसे एसएफ फ़ॉन्ट पर लागू किया है और यह बहुत अच्छा काम कर रहा है। -पल-सिस्टम के साथ समस्या सभी सामग्री में लागू होती है, और फ़ॉन्ट-परिवार की ओवरराइड शैली।

— हार्दिक दरजी