Local Font Access API का इस्तेमाल करने पर, उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट का डेटा ऐक्सेस किया जा सकता है. इसमें नाम, स्टाइल, और फ़ैमिली जैसी सबसे ऊंचे लेवल की जानकारी के साथ-साथ बुनियादी फ़ॉन्ट फ़ाइलों की रॉ बाइट भी शामिल होती हैं. जानें कि SVG में बदलाव करने वाला ऐप्लिकेशन Boxy SVG, इस एपीआई का इस्तेमाल कैसे करता है.
परिचय
(यह लेख वीडियो के तौर पर भी उपलब्ध है.)
Boxy SVG एक वेक्टर ग्राफ़िक एडिटर है. इसका मुख्य इस्तेमाल, SVG फ़ाइल फ़ॉर्मैट में ड्रॉइंग में बदलाव करने के लिए किया जाता है. इससे इलस्ट्रेशन, लोगो, आइकॉन, और ग्राफ़िक डिज़ाइन के दूसरे एलिमेंट बनाए जा सकते हैं. इसे पोलिश डेवलपर Jarosław Foksa ने बनाया है. इसे पहली बार 15 मार्च, 2013 को रिलीज़ किया गया था. Jarosław, Boxy SVG ब्लॉग चलाते हैं. इसमें वे ऐप्लिकेशन में जोड़ी गई नई सुविधाओं के बारे में बताते हैं. यह डेवलपर, Chromium के Project Fugu का ज़बरदस्त समर्थक है. यहां तक कि ऐप्लिकेशन के आइडिया ट्रैकर पर उनका Fugu टैग भी है.
Boxy SVG में लोकल फ़ॉन्ट ऐक्सेस एपीआई
इसके लिए, Jarosowaw ने Local Font Access API के बारे में ब्लॉगिंग किया. Local Font Access API की मदद से, उपयोगकर्ता स्थानीय तौर पर इंस्टॉल किए गए फ़ॉन्ट ऐक्सेस कर सकते हैं. इसमें, नाम, स्टाइल, और फ़ैमिली जैसी उच्च-स्तर की जानकारी के साथ-साथ, फ़ॉन्ट फ़ाइलों के रॉ बाइट भी शामिल हैं. यहां दिए गए स्क्रीनशॉट में, मैंने अपने MacBook पर स्थानीय तौर पर इंस्टॉल किए गए फ़ॉन्ट का ऐक्सेस, ऐप्लिकेशन को कैसे दिया है और अपने टेक्स्ट के लिए मार्कर फ़ेल्ट फ़ॉन्ट को कैसे चुना है, यह देखा जा सकता है.
दिया गया कोड काफ़ी आसान है. जब कोई उपयोगकर्ता पहली बार फ़ॉन्ट फ़ैमिली पिकर खोलता है, तो ऐप्लिकेशन सबसे पहले यह जांच करता है कि वेब ब्राउज़र, Local Font Access API के साथ काम करता है या नहीं.
यह एपीआई के पुराने वर्शन की भी जांच करता है और अगर वह मौजूद है, तो उसका इस्तेमाल करता है. साल 2023 से, पुराने एपीआई को सुरक्षित तरीके से अनदेखा किया जा सकता है. ऐसा इसलिए, क्योंकि यह एक्सपेरिमेंटल Chrome फ़्लैग के ज़रिए सिर्फ़ कुछ समय के लिए उपलब्ध था. हालांकि, Chromium के कुछ डेरिवेटिव अब भी इसका इस्तेमाल कर सकते हैं.
let isLocalFontsApiEnabled = (
// Local Font Access API, Chrome >= 102
window.queryLocalFonts !== undefined ||
// Experimental Local Font Access API, Chrome < 102
navigator.fonts?.query !== undefined
);
अगर Local Font Access API उपलब्ध नहीं है, तो फ़ॉन्ट फ़ैमिली पिकर धूसर हो जाएगा. फ़ॉन्ट की सूची के बजाय, उपयोगकर्ता को प्लेसहोल्डर टेक्स्ट दिखेगा:
if (isLocalFontsApiEnabled === false) {
showPlaceholder("no-local-fonts-api");
return;
}
इसके अलावा, ऑपरेटिंग सिस्टम से सभी फ़ॉन्ट की सूची पाने के लिए, Local Font Access API का इस्तेमाल किया जाता है. try…catch ब्लॉक पर ध्यान दें. अनुमति से जुड़ी गड़बड़ियों को ठीक से मैनेज करने के लिए, इस ब्लॉक की ज़रूरत होती है.
let localFonts;
if (isLocalFontsApiEnabled === true) {
try {
// Local Font Access API, Chrome >= 102
if (window.queryLocalFonts) {
localFonts = await window.queryLocalFonts();
}
// Experimental Local Font Access API, Chrome < 102
else if (navigator.fonts?.query) {
localFonts = await navigator.fonts.query({
persistentAccess: true,
});
}
} catch (error) {
showError(error.message, error.name);
}
}
लोकल फ़ॉन्ट की सूची वापस पाने के बाद, उससे आसान और सामान्य fontsIndex बनाया जाता है:
let fontsIndex = [];
for (let localFont of localFonts) {
let face = "400";
// Determine the face name
{
let subfamily = localFont.style.toLowerCase();
subfamily = subfamily.replaceAll(" ", "");
subfamily = subfamily.replaceAll("-", "");
subfamily = subfamily.replaceAll("_", "");
if (subfamily.includes("thin")) {
face = "100";
} else if (subfamily.includes("extralight")) {
face = "200";
} else if (subfamily.includes("light")) {
face = "300";
} else if (subfamily.includes("medium")) {
face = "500";
} else if (subfamily.includes("semibold")) {
face = "600";
} else if (subfamily.includes("extrabold")) {
face = "800";
} else if (subfamily.includes("ultrabold")) {
face = "900";
} else if (subfamily.includes("bold")) {
face = "700";
}
if (subfamily.includes("italic")) {
face += "i";
}
}
let descriptor = fontsIndex.find((descriptor) => {
return descriptor.family === localFont.family);
});
if (descriptor) {
if (descriptor.faces.includes(face) === false) {
descriptor.faces.push(face);
}
} else {
let descriptor = {
family: localFont.family,
faces: [face],
};
fontsIndex.push(descriptor);
}
}
for (let descriptor of fontsIndex) {
descriptor.faces.sort();
}
इसके बाद, सामान्य फ़ॉन्ट इंडेक्स को IndexedDB डेटाबेस में सेव किया जाता है, ताकि उससे आसानी से क्वेरी की जा सके, उसे ऐप्लिकेशन इंस्टेंस के बीच शेयर किया जा सके, और सेशन के बीच उसे सुरक्षित रखा जा सके. Boxy SVG, डेटाबेस को मैनेज करने के लिए Dexie.js का इस्तेमाल करता है:
let database = new Dexie("LocalFontsManager");
database.version(1).stores({cache: "family"}).
await database.cache.clear();
await database.cache.bulkPut(fontsIndex);
डेटाबेस भर जाने के बाद, फ़ॉन्ट पिकर विजेट उससे क्वेरी कर सकता है और नतीजे स्क्रीन पर दिखा सकता है:
यह ध्यान देने वाली बात है कि Boxy SVG, सूची को <bx-fontfamilypicker> नाम के कस्टम एलिमेंट में रेंडर करता है. साथ ही, फ़ॉन्ट की सूची के हर आइटम को स्टाइल करता है, ताकि वह किसी खास फ़ॉन्ट फ़ैमिली में दिखे. Boxy SVG, इस और अन्य कस्टम एलिमेंट को पेज के बाकी हिस्से से अलग करने के लिए, शैडो डीओएम का इस्तेमाल करता है.
मीटिंग में सामने आए नतीजे
स्थानीय फ़ॉन्ट की सुविधा काफ़ी लोकप्रिय हो रही है. लोगों को डिज़ाइन करने और बनाने के लिए, स्थानीय फ़ॉन्ट का ऐक्सेस मिलता है. जब एपीआई का शेप बदला और सुविधा कुछ समय के लिए काम नहीं कर रही थी, तो उपयोगकर्ताओं ने तुरंत इसकी जानकारी दी. Jarosław ने तुरंत कोड को डिफ़ेंसिव पैटर्न में बदल दिया. ऊपर दिए गए स्निपेट में यह पैटर्न देखा जा सकता है. यह पैटर्न, Chrome के अप-टू-डेट वर्शन के साथ-साथ, Chromium के उन वर्शन के साथ भी काम करता है जो शायद नए वर्शन पर स्विच नहीं हुए हैं. Boxy SVG को आज़माएं और अपने डिवाइस में इंस्टॉल किए गए फ़ॉन्ट देखना न भूलें. आपको Zapf Dingbats या Webdings जैसे कुछ ऐसे क्लासिक फ़ॉन्ट भी दिख सकते हैं जिन्हें आपने बहुत समय पहले इस्तेमाल किया था.