Local Font Access API, उपयोगकर्ता के लोकल तौर पर इंस्टॉल किए गए फ़ॉन्ट डेटा को ऐक्सेस करने का एक तरीका उपलब्ध कराता है. इसमें हाई लेवल की जानकारी, जैसे कि नाम, स्टाइल, और फ़ैमिली को ऐक्सेस करने के साथ-साथ, फ़ॉन्ट की फ़ॉन्ट फ़ाइलों के रॉ बाइट डेटा को भी ऐक्सेस किया जा सकता है. जानें कि SVG फ़ाइल में बदलाव करने वाला ऐप्लिकेशन Boxy SVG, इस एपीआई का इस्तेमाल कैसे करता है.
शुरुआती जानकारी
(यह लेख वीडियो के रूप में भी उपलब्ध है.)
Boxy SVG एक वेक्टर ग्राफ़िक एडिटर है. इसका मुख्य इस्तेमाल SVG फ़ाइल फ़ॉर्मैट में ड्रॉइंग में बदलाव करना है. इससे इलस्ट्रेशन, लोगो, आइकॉन, और ग्राफ़िक डिज़ाइन बनाने के लिए इस्तेमाल किया जा सकता है. इसे पोलिश डेवलपर यारोस्लॉव फ़ोक्स ने डेवलप किया है और इसे शुरुआत में 15 मार्च, 2013 को रिलीज़ किया गया था. यारोस्लॉ एक Boxy SVG ब्लॉग चलाते हैं जिसमें उन्होंने ऐप्लिकेशन में जोड़ी जाने वाली नई सुविधाओं के बारे में बताया. डेवलपर, Chromium Project Fugu का एक मज़बूत सपोर्ट करता है. यहां तक कि उसके ऐप्लिकेशन के आइडिया ट्रैकर में एक Fugu टैग भी है.
Boxy SVG में लोकल फ़ॉन्ट ऐक्सेस एपीआई
जारोस्लॉव ने इस बारे में ब्लॉग किया एक सुविधा 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 फ़ाइल में इस और दूसरे कस्टम एलिमेंट में Shadow DOM का इस्तेमाल करता है.
मीटिंग में सामने आए नतीजे
स्थानीय फ़ॉन्ट सुविधा वास्तव में लोकप्रिय है, जहां उपयोगकर्ताओं को अपने डिज़ाइन और निर्माण के लिए अपने स्थानीय फ़ॉन्ट का उपयोग करते हुए आनंद आता है. जब एपीआई का आकार बदला और सुविधा थोड़ी देर के लिए टूट गई, तो उपयोगकर्ताओं ने तुरंत नोट कर लिया. Jarosław ने आपको ऊपर दिए गए स्निपेट में दिखाई दे रहे सुरक्षात्मक पैटर्न में तुरंत बदलाव कर दिया. यह कोड अप-टू-डेट Chrome और साथ ही अन्य Chromium डेरिवेटिव के साथ काम करता है जिनमें हो सकता है कि सबसे नए वर्शन पर स्विच न किया गया हो. Boxy SVG फ़ाइल का इस्तेमाल करें और डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट देखना न भूलें. आपको Zapf Dingbats या Webdings जैसे कुछ क्लासिक गाने कभी मिल सकते हैं, जो अब तक आपको याद नहीं रहे.