क्या ऑफ़लाइन स्टोरेज कैश मैनिफेस्ट के माध्यम से वेबफॉन्ट लोड करना संभव है?

Question

मैं समझता हूं कि मैं अपने फ़ॉन्ट्स को एचटीएमएल/सीएसएस के माध्यम से आयात कर सकता हूं लेकिन मुझे आश्चर्य है कि यह एक प्राप्त दृष्टिकोण है या नहीं।

धन्यवाद!

Answer 1

हां, यदि आप अपनी मेनिफेस्ट फ़ाइल में फोंट जोड़ते हैं तो उन्हें बाकी फ़ाइलों के साथ डाउनलोड किया जाएगा, और फिर ऑफलाइन उपलब्ध होगा। फोंट को उसी सर्वर से उपलब्ध होने की आवश्यकता होगी जहां आपका ऑफ़लाइन ऐप है, क्योंकि आप अपने डोमेन पर संसाधनों को कैश नहीं कर सकते हैं। उदाहरण के लिए, आप Google वेब फ़ॉन्ट को कैश नहीं कर सके। मैं इस पर कुछ परीक्षण कर रहा हूं, ऐसा लगता है कि Google से फ़ॉन्ट्स क्रोम और ओपेरा, only Firefox has problems पर कैश किए गए हैं। मैनिफेस्ट के लिए 'आपके डोमेन पर प्रतिबंध' केवल तभी लागू होता है जब यह HTTPS पर कार्य करता है।

आपको अपने पृष्ठ में उपयोग किए जाने के लिए अपने सीएसएस में @font-face नियम के साथ फोंट का संदर्भ देने की आवश्यकता होगी। उदाहरण के लिए, अपने मैनिफ़ेस्ट फ़ाइल में:

CACHE MANIFEST 
# v1 
index.html 
style.css 
GenBasR-webfont.eot 
GenBasR-webfont.woff 
GenBasR-webfont.ttf 
GenBasR-webfont.svg 

style.css में:

@font-face { 
    font-family: 'GentiumBasicRegular'; 
    src: url('GenBasR-webfont.eot'); 
    src: url('GenBasR-webfont.eot?iefix') format('eot'), 
     url('GenBasR-webfont.woff') format('woff'), 
     url('GenBasR-webfont.ttf') format('truetype'), 
     url('GenBasR-webfont.svg#webfontLblSsz1O') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

body { 
    font-family: 'GentiumBasicRegular'; 
} 

Font Squirrel से Gentium फ़ाइलें प्राप्त करें।