@font-face src: local - स्थानीय फ़ॉन्ट उपयोग सुनिश्चित करना

यह प्रश्न इस मुद्दे को संबोधित करता है कि ब्राउज़र को फ़ॉन्ट डाउनलोड करने से कैसे रोका जाए @फ़ॉन्ट-फेस नियम का उपयोग करते समय उपयोगकर्ता के सिस्टम पर पहले से ही इंस्टॉल किया गया है।

प्रश्न में प्रदान किया गया सीएसएस फॉन्ट स्क्विरेल द्वारा अनुशंसित सिंटैक्स का उपयोग करता है। हालाँकि, समस्या क्रोमियम में बनी रहती है, जो ब्राउज़र-विशिष्ट समस्या का सुझाव देती है।

समाधान स्थानीय फ़ॉन्ट फ़ाइलों को प्राथमिकता देने के लिए "स्थानीय ()" कीवर्ड का लाभ उठाने में निहित है। जैसा कि नीचे देखा गया है, src प्रॉपर्टी को संशोधित करके, ब्राउज़र पहले स्थानीय सिस्टम से फ़ॉन्ट लोड करने का प्रयास करेगा:

src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');

इसमें संशोधित कोड, 'स्थानीय('DejaVu सेरिफ़')' यह सुनिश्चित करता है कि क्रोमियम वेब से डाउनलोड करने का प्रयास करने से पहले उपयोगकर्ता के सिस्टम पर स्थापित DejaVu सेरिफ़ फ़ॉन्ट की जांच करता है।

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