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




what is css in english (6)

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

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

मूल उत्तर:

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

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

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

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

कोई फायदा नहीं। मैंने इस सवाल का जवाब देने की कोशिश की है, लेकिन @font-face यहां समाधान नहीं है।


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

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

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


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

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

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

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

सफारी और फ़ायरफ़ॉक्स एसएफ फॉर -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/

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

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

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

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


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

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

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

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

तथा:

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

आगे की:

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

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


स्वीकृत उत्तरों सहित कोई भी वर्तमान उत्तर 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");
}

Source





css