CSS @ फ़ॉन्ट-चेहरा - "src: local ('' ')" का क्या अर्थ है?

Question

मैं @font-faceपहली बार उपयोग कर रहा हूं और फोंटक्वायरेल से एक फ़ॉन्ट-किट डाउनलोड किया है

कोड वे मेरे सीएसएस में डालने की सलाह देते हैं:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

अब, स्माइली फेस की बात ने मुझे चौंका दिया है। लेकिन ऐसा बहुत अधिक संख्या में यूआरएल में होता है - वे इतनी सारी फाइलें क्यों सुझाते हैं और क्या पेज को रेंडर करने पर वे सभी ब्राउज़र में भेजे जाएंगे? सभी .ttf को हटाने में कोई नुकसान है?

Answer 1

यदि आप फ़ॉन्ट-गिलहरी के फ़ॉन्ट-फेस जनरेटर में नोट्स पढ़ते हैं, तो आप देखेंगे कि यह पॉल आयरिश द्वारा एक गोचा था।

प्रस्तुत है उनके ब्लॉग पोस्ट के अंश :

---

और .. @font-faceवाक्यविन्यास के बारे में

अब मैं मूल बुलेटप्रूफ सिंटैक्स पर बुलेटप्रूफ स्माइली भिन्नता की सिफारिश करता हूं।

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

बुलेटप्रूफ पोस्ट से:

हाँ, यह एक स्माइली चेहरा है। OpenType युक्ति इंगित करती है कि कोई भी दो-बाइट यूनिकोड वर्ण मैक पर फ़ॉन्ट नाम में काम नहीं करेगा, ताकि इस संभावना को कम किया जा सके कि किसी ने वास्तव में इस तरह के नाम के साथ एक फ़ॉन्ट जारी किया है।

स्माइली एक बेहतर उपाय है, इसके कुछ कारण हैं:

• वेबकिट + फ़ॉन्ट प्रबंधन सॉफ्टवेयर स्थानीय संदर्भों को गड़बड़ कर सकता है, जैसे ग्लिफ को ए ब्लॉक में बदलना।

• OS X पर, फ़ॉन्ट प्रबंधन सॉफ़्टवेयर किसी स्थानीय () फ़ॉन्ट तक पहुँचने का प्रयास करते समय डायलॉग दिखाने के लिए सिस्टम सेटिंग्स बदल सकता है जो लाइब्रेरी / फोंट के बाहर पहुँच योग्य है। मेरे बुलेटप्रूफ पोस्ट पर अधिक विस्तार। फ़ॉन्ट एक्सप्लोरर एक्स को फ़ायरफ़ॉक्स में अन्य सामान को गड़बड़ाने के लिए भी जाना जाता है।

• हालांकि यह संभावना नहीं है, आप एक स्थानीय () फ़ॉन्ट का संदर्भ दे सकते हैं जो आपके विचार से पूरी तरह से अलग है। (अलग-अलग फॉन्ट पर टाइपोफाइल पोस्ट, एक ही नाम) कम से कम इसका एक जोखिम है, और आप ब्राउज़र और होस्ट मशीन दोनों के प्रकार का नियंत्रण कर रहे हैं। यह जोखिम फ़ॉन्ट डाउनलोड से बचने के लाभ के लायक नहीं हो सकता है।

ये सभी एज केस के मुद्दे हैं, लेकिन यह विचार करने लायक है।

Comments

बहुत बहुत धन्यवाद now यह अब स्पष्ट है - मुझे अभी यह लेख nicewebtype.com पर मिला है, जो मेरे अन्य सभी सवालों के जवाब भी देता है

— Stephenmurdoch

तो, संक्षेप में, उस कोड का स्थानीय भाग कहता है "यह फ़ॉन्ट स्थानीय रूप से एक्स के रूप में जाना जाता है", और हम स्माइली का उपयोग कर रहे हैं संभवतः उसी नाम के साथ गलत फ़ॉन्ट का उपयोग करने से ब्राउज़र को रोकने के लिए (ऊपर बताए गए कारणों के लिए)। अच्छा :)

— abelito

क्या आपको वास्तव में एक local()बयान की आवश्यकता है ? क्या यह बेमानी है? क्या ब्राउज़र url()को इसके बिना आपका पहला उपयोग नहीं करना चाहिए ?

— साइमन ईस्ट

जब मैं क्रोम देव उपकरण में अपने सीएसएस स्रोत को स्माइली चेहरे के जूते इस तरह से देखता हूं: क्या यह सही है?

— एंथनी

@ साइमन: स्थानीय स्टेटमेंट IE6 - 8 (लिंक्ड ब्लॉग पोस्ट देखें) का समर्थन करने के लिए है, जब तक कि आपको इन ब्राउज़रों की परवाह न हो।

— स्टिजन डे विट

Answer 2

स्थानीय (local) IE6-8 को फोंट डाउनलोड करने से डायवर्ट करने के लिए एक सीएसएस हैक है जो इसका उपयोग नहीं कर सकता (यह केवल ईओटी प्रारूप में फोंट का उपयोग कर सकता है)।

समझाया: पिछले src संपत्ति CSS झरना में पूर्वता लेता है, जिसका अर्थ है कि CSS नीचे से ऊपर तक पार्स किया जाएगा। स्थानीय (at) IE को src को नीचे की ओर बनाएगा, बिना बैंडविड्थ बर्बाद किए फॉन्ट डाउनलोड करने वाले फोंट का उपयोग नहीं कर सकता है, और सीधे .eotफॉरमेट में फॉण्ट में जा सकता है (आपके प्रश्न में ऊपर दी गई रेखा पर परिभाषित) जो इसका उपयोग करेगा। स्माइली सिर्फ यह सुनिश्चित करने के लिए है कि उस नाम (चरित्र संयोजन) के साथ एक स्थानीय फ़ॉन्ट नहीं होगा।

यहां पढ़ें: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-Ex/

Answer 3

@ फ़ॉन्ट-चेहरा पिछले src संपत्ति सीएसएस कैस्केड में पूर्वता लेता है, जिसका अर्थ है कि सीएसएस नीचे से ऊपर तक पार्स किया जाएगा।