यदि एकाधिक स्रोत @ फ़ॉन्ट-फेस में सूचीबद्ध हैं, तो क्या वे सभी क्लाइंट साइड पर लोड किए गए हैं?

Question

मैं अपनी साइट की गति का अनुकूलन और केवल फ़ाइल वे निम्नलिखित कोड या सभी फ़ॉन्ट फ़ाइलों से की जरूरत है लोड होगा ब्राउज़र के बारे में पता करना चाहते करने की मांग कर रहा हूँ:

@font-face { 
    font-family: 'Proxima Nova'; 
    src: url('proximanova-regitalic-webfont.eot'); 
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('proximanova-regitalic-webfont.woff') format('woff'), 
     url('proximanova-regitalic-webfont.ttf') format('truetype'), 
     url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

इसके अलावा, इस सबसे इष्टतम तरीका है @ फ़ॉन्ट-फेस करने का? क्या उपयोगकर्ताओं के लिए लोड समय कम करने के लिए कोई अन्य रणनीतियां हैं?

Answer 1

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

यह समान है कि ब्राउज़र font-family संपत्ति में फ़ॉन्ट स्टैक का उपयोग कैसे करता है।

बेशक, सभी ब्राउज़र spec के अनुरूप नहीं हैं। आईई जैसे कुछ ब्राउज़र कई फोंट डाउनलोड करने का प्रयास करेंगे क्योंकि वे अनपेक्षित तरीकों से नियम को पार्स कर सकते हैं या पार्स कर सकते हैं; अधिक जानकारी और शोध के लिए टिप्पणियां देखें।

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

Answer 2

इस सवाल का जवाब करने के लिए, मैं निम्नलिखित W3C दस्तावेज़ से प्रासंगिक अंश उद्धृत किया है:

CSS Fonts Module Level 3
W3C उम्मीदवार सिफारिश उद्धृत सामग्री 3 अक्टूबर 2013

(ध्यान दें, कि मैं है उन वाक्यों पर जोर दिया जो प्रश्न के सबसे प्रासंगिक हैं।)

---

4.1 The @font-face rule

@font-face नियम फोंट कि स्वचालित रूप से प्राप्त किए गए और जरूरत पड़ने पर सक्रिय हैं को जोड़ने के लिए अनुमति देता है। यह किसी दिए गए प्लेटफ़ॉर्म पर उपलब्ध फ़ॉन्ट्स के सेट पर फ़ॉन्ट पसंद को सीमित करने के बजाय किसी दिए गए पृष्ठ के लिए डिज़ाइन लक्ष्यों से निकटता से मेल खाने वाले फ़ॉन्ट का चयन करने के लिए लेखकों को प्रदान करता है। फ़ॉन्ट डिस्क्रिप्टरों का एक सेट के स्थान को स्थानीय रूप से या बाहरी रूप से, व्यक्तिगत चेहरे की विशेषताओं के साथ शैली के साथ परिभाषित करता है। एकाधिक @font-face नियमों का उपयोग विभिन्न प्रकार के चेहरों के साथ फ़ॉन्ट परिवारों के निर्माण के लिए किया जा सकता है। सीएसएस फ़ॉन्ट मिलान नियमों का उपयोग करके, उपयोगकर्ता एजेंट केवल उन चेहरों को चुनिंदा रूप से डाउनलोड कर सकता है जिन्हें टेक्स्ट के दिए गए टुकड़े के लिए आवश्यक है।

4.3 Font reference: the src descriptor

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

...

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

 
    /* load WOFF font if possible, otherwise use OpenType font */ 
    @font-face { 
     font-family: bodytext; 
     src: url(ideal-sans-serif.woff) format("woff"), 
      url(basic-sans-serif.ttf) format("opentype"); 
    }