स्थानीय फ़ॉन्ट के साथ बेहतर टाइपोग्राफ़ी का इस्तेमाल करना

जानें कि Local Font Access API की मदद से, उपयोगकर्ता के स्थानीय तौर पर इंस्टॉल किए गए फ़ॉन्ट को कैसे ऐक्सेस किया जा सकता है. साथ ही, यह भी जानें कि इन फ़ॉन्ट के बारे में कम-लेवल पर जानकारी कैसे पाई जा सकती है

Thomas Steiner

वेब के लिए सुरक्षित फ़ॉन्ट

अगर आप लंबे समय से वेब डेवलपमेंट कर रहे हैं, तो आपको तथाकथित वेब सुरक्षित फ़ॉन्ट याद होंगे. ये फ़ॉन्ट सबसे ज़्यादा इस्तेमाल होने वाले ऑपरेटिंग सिस्टम के तकरीबन सभी इंस्टेंस पर उपलब्ध हैं. इनमें Windows, macOS, Linux के सबसे आम वर्शन, Android, और iOS सिस्टम शामिल हैं. Microsoft ने 2000 के दशक की शुरुआत में, वेब के लिए TrueType कोर फ़ॉन्ट नाम की एक पहल की भी शुरुआत की थी. इस पहल ने इन फ़ॉन्ट को बिना किसी शुल्क के डाउनलोड करने के लिए उपलब्ध कराया था. इसका मकसद यह था कि "जब भी कोई ऐसी वेबसाइट विज़िट की जाए जिसके लिए वे बनाए गए हों, तो आपको ठीक वैसा ही पेज दिखेगा जैसा साइट डिज़ाइनर ने सोचा था". हां, इस साइट में Comic Sans MS शामिल है. यहां एक क्लासिक वेब सुरक्षित फ़ॉन्ट स्टैक दिया गया है (जो किसी भी sans-serif फ़ॉन्ट के फ़ाइनल फ़ॉलबैक के साथ) कुछ ऐसा दिख सकता है:

body {
  font-family: Helvetica, Arial, sans-serif;
}

वेब फ़ॉन्ट

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

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

इसके बाद, कस्टम वेब फ़ॉन्ट का इस्तेमाल करने के लिए, पहले की तरह font-family बताएं:

body {
  font-family: 'FlamboyantSansSerif';
}

फ़िंगरप्रिंट वेक्टर के तौर पर लोकल फ़ॉन्ट

ज़्यादातर वेब फ़ॉन्ट, वेब से आते हैं. दिलचस्प बात यह है कि @font-face डिक्लेरेशन में src प्रॉपर्टी, url() फ़ंक्शन के अलावा, local() फ़ंक्शन के साथ भी काम करती है. इससे पसंद के मुताबिक बनाए गए फ़ॉन्ट, डिवाइस पर ही लोड (सरप्राइज़!) हो सकते हैं. अगर उपयोगकर्ता के ऑपरेटिंग सिस्टम पर FlamboyantSansSerif इंस्टॉल है, तो डाउनलोड किए जाने के बजाय उस लोकल कॉपी का इस्तेमाल किया जाएगा:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

यह तरीका एक अच्छा फ़ॉलबैक सिस्टम देता है, जो बैंडविथ को बचाता है. बदकिस्मती से, इंटरनेट पर, हम अच्छी चीज़ें नहीं कर सकते. local() फ़ंक्शन में समस्या यह है कि ब्राउज़र फ़िंगरप्रिंटिंग के लिए इसका गलत इस्तेमाल किया जा सकता है. उपयोगकर्ता ने जो फ़ॉन्ट इंस्टॉल किए हैं उनकी सूची पहचानने में काफ़ी मुश्किल हो सकती है. कई कंपनियों के अपने कॉर्पोरेट फ़ॉन्ट होते हैं, जो कर्मचारियों के लैपटॉप पर इंस्टॉल किए जाते हैं. उदाहरण के लिए, Google का एक कॉर्पोरेट फ़ॉन्ट है, जिसे Google Sans कहते हैं.

macOS का फ़ॉन्ट बुक ऐप्लिकेशन, Google Sans फ़ॉन्ट की झलक दिखा रहा है.
Google के कर्मचारी के लैपटॉप पर Google Sans फ़ॉन्ट इंस्टॉल किया गया है.

कोई हमलावर यह पता लगाने की कोशिश कर सकता है कि कोई व्यक्ति किस कंपनी के लिए काम करता है. इसके लिए, वह Google Sans जैसे बड़ी संख्या में जाने-पहचाने कॉर्पोरेट फ़ॉन्ट की मौजूदगी का पता लगाकर जांच कर सकता है. हमलावर इन फ़ॉन्ट में सेट किए गए टेक्स्ट को कैनवस पर रेंडर करने और ग्लिफ़ को मापने की कोशिश करेगा. अगर ग्लिफ़, कॉर्पोरेट फ़ॉन्ट के जाने-पहचाने आकार से मेल खाता है, तो हमलावर को हिट मिल जाता है. अगर ग्लिफ़ मेल नहीं खाते हैं, तो हमलावर को पता चलता है कि डिफ़ॉल्ट रिप्लेसमेंट फ़ॉन्ट इस्तेमाल किया गया था, क्योंकि कॉर्पोरेट फ़ॉन्ट इंस्टॉल नहीं किया गया था. इस और ब्राउज़र में फ़िंगरप्रिंटिंग से जुड़े दूसरे हमलों के बारे में पूरी जानकारी के लिए, Laperdix et al का सर्वे पेपर पढ़ें.

कंपनी के फ़ॉन्ट अलग-अलग होते हैं, यहां तक कि इंस्टॉल किए गए फ़ॉन्ट की सूची भी पहचान कर सकती है. इस अटैक वेक्टर की स्थिति इतनी खराब हो गई है कि हाल ही में WebKit टीम ने फ़ैसला दिया कि "सिर्फ़ उपलब्ध फ़ॉन्ट की सूची में] वेब फ़ॉन्ट और फ़ॉन्ट को सिर्फ़ ऑपरेटिंग सिस्टम में शामिल किया जाए, लेकिन स्थानीय रूप से उपयोगकर्ता के इंस्टॉल किए गए फ़ॉन्ट न शामिल करें". (और यहां मैं लोकल फ़ॉन्ट का ऐक्सेस देने के बारे में लेख दे रहा हूं.)

Local Font Access API (एपीआई)

इस लेख की शुरुआत में आपका मूड खराब हो सकता है. क्या हमारे पास अच्छी चीज़ें नहीं हो सकती? चिंता न करें. हमें लगता है कि हम कर सकते हैं और शायद हर चीज़ निराशाजनक नहीं होती. हालांकि, सबसे पहले एक सवाल का जवाब दें. यह सवाल आपके मन से पूछा जा सकता है.

वेब फ़ॉन्ट उपलब्ध होने पर, हमें लोकल फ़ॉन्ट ऐक्सेस एपीआई की ज़रूरत क्यों होती है?

पुराने समय से, प्रोफ़ेशनल-क्वालिटी के लिए डिज़ाइन और ग्राफ़िक टूल को वेब पर डिलीवर करना मुश्किल रहा है. इसकी एक वजह यह है कि वे पेशेवर तरीके से तैयार किए गए और संकेत वाले फ़ॉन्ट को ऐक्सेस और इस्तेमाल नहीं कर पाते. इन फ़ॉन्ट को डिज़ाइनर ने स्थानीय तौर पर इंस्टॉल किया है. वेब फ़ॉन्ट से पब्लिश करने के कुछ इस्तेमाल के उदाहरण शुरू किए जाते हैं, लेकिन ग्लिफ़ आउटलाइन को रेंडर करने के लिए रास्टराइज़र के इस्तेमाल किए जाने वाले वेक्टर ग्लिफ़ के आकार और फ़ॉन्ट टेबल के लिए प्रोग्रामैटिक ऐक्सेस चालू नहीं कर पाते. इसी तरह किसी वेब फ़ॉन्ट के बाइनरी डेटा को ऐक्सेस करने का कोई तरीका नहीं है.

  • डिज़ाइन टूल को अपना OpenType लेआउट लागू करने के लिए फ़ॉन्ट बाइट का ऐक्सेस चाहिए. साथ ही, ये डिज़ाइन टूल को निचले लेवल पर हुक करने की अनुमति देते हैं, जैसे कि वेक्टर फ़िल्टर करने या ग्लिफ़ के आकार में बदलने जैसी कार्रवाइयों के लिए.
  • डेवलपर के पास अपने ऐप्लिकेशन के लिए लेगसी फ़ॉन्ट स्टैक हो सकते हैं, जिन्हें वे वेब पर ला रहे हैं. इन स्टैक का इस्तेमाल करने के लिए, इन्हें आम तौर पर फ़ॉन्ट डेटा का सीधा ऐक्सेस चाहिए. वेब फ़ॉन्ट में ये काम नहीं करते.
  • ऐसा हो सकता है कि कुछ फ़ॉन्ट को वेब पर डिलीवर करने का लाइसेंस न मिला हो. उदाहरण के लिए, Linotype के पास कुछ ऐसे फ़ॉन्ट के लिए लाइसेंस है जिसमें सिर्फ़ डेस्कटॉप इस्तेमाल शामिल हैं.

Local Font Access API की मदद से ये समस्याएं हल की जा सकती हैं. इसके दो हिस्से होते हैं:

  • font enumeration API, जो उपयोगकर्ताओं को उपलब्ध सिस्टम फ़ॉन्ट के पूरे सेट का ऐक्सेस देने की सुविधा देता है.
  • गिनती के हर नतीजे से, कम-लेवल (बाइट पर आधारित) SFNT कंटेनर के ऐक्सेस का अनुरोध करने की सुविधा, जिसमें पूरा फ़ॉन्ट डेटा शामिल होता है.

ब्राउज़र समर्थन

ब्राउज़र सहायता

  • 103
  • 103
  • x
  • x

सोर्स

Local Font Access API को इस्तेमाल करने का तरीका

सुविधा की पहचान करने की सुविधा

यह देखने के लिए कि Local Font Access API काम करता है या नहीं, इसका इस्तेमाल करें:

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}

लोकल फ़ॉन्ट की गिनती करना

डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट की सूची पाने के लिए, आपको window.queryLocalFonts() को कॉल करना होगा. पहली बार, इससे अनुमति का अनुरोध ट्रिगर होगा. उपयोगकर्ता इसे स्वीकार या अस्वीकार कर सकता है. अगर उपयोगकर्ता अपने लोकल फ़ॉन्ट से क्वेरी करने की अनुमति देता है, तो ब्राउज़र फ़ॉन्ट के डेटा के साथ एक अरे दिखाएगा, जिसे लूप किया जा सकता है. हर फ़ॉन्ट को FontData ऑब्जेक्ट के तौर पर दिखाया जाता है, जहां family (उदाहरण के लिए, "Comic Sans MS"), fullName (उदाहरण के लिए, "Comic Sans MS"), postscriptName (उदाहरण के लिए, "ComicSansMS"), और style (उदाहरण के लिए, "Regular") प्रॉपर्टी होती है.

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

अगर आपकी दिलचस्पी सिर्फ़ फ़ॉन्ट के किसी सबसेट में है, तो postscriptNames पैरामीटर जोड़कर, PostScript के नामों के आधार पर उन्हें फ़िल्टर भी किया जा सकता है.

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

SFNT डेटा ऐक्सेस करना

SFNT का पूरा ऐक्सेस, FontData ऑब्जेक्ट के blob() तरीके से मिलता है. SFNT एक फ़ॉन्ट फ़ाइल फ़ॉर्मैट है, जिसमें अन्य फ़ॉन्ट हो सकते हैं, जैसे कि PostScript, TrueType, OpenType, वेब ओपन फ़ॉन्ट फ़ॉर्मैट (WOFF) फ़ॉन्ट और दूसरे फ़ॉन्ट.

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

डेमो

नीचे दिए गए डेमो में, लोकल फ़ॉन्ट ऐक्सेस एपीआई को इस्तेमाल किया जा सकता है. सोर्स कोड भी देखना न भूलें. इस डेमो में, <font-select> नाम का एक कस्टम एलिमेंट दिखाया गया है, जो लोकल फ़ॉन्ट पिकर को लागू करता है.

निजता से जुड़ी ज़रूरी बातें

ऐसा लगता है कि "local-fonts" की अनुमति से, फ़िंगरप्रिंट की सुविधा वाली स्क्रीन बहुत ज़्यादा ऐक्सेस की जा सकती है. हालांकि, ब्राउज़र अपनी पसंद की चीज़ें लौटाने के लिए स्वतंत्र होते हैं. उदाहरण के लिए, पहचान छिपाने को ध्यान में रखकर बनाए गए ब्राउज़र, ब्राउज़र में पहले से मौजूद डिफ़ॉल्ट फ़ॉन्ट का ही सेट उपलब्ध कराने का विकल्प चुन सकते हैं. इसी तरह, ब्राउज़र को टेबल में मौजूद डेटा भी ठीक वैसा ही देना ज़रूरी नहीं होता जैसा वह डिस्क पर दिखता है.

जहां भी संभव हो, Local Font Access API को सिर्फ़ वही जानकारी दिखाने के लिए डिज़ाइन किया गया है जो बताए गए इस्तेमाल के उदाहरणों को चालू करने के लिए ज़रूरी है. सिस्टम एपीआई इंस्टॉल किए गए फ़ॉन्ट की सूची बना सकता है, जो रैंडम या क्रम से नहीं, बल्कि फ़ॉन्ट को इंस्टॉल करने के क्रम में होता है. इस तरह के सिस्टम एपीआई से इंस्टॉल किए गए फ़ॉन्ट की सूची दिखाने पर, उससे ज़्यादा डेटा दिख सकता है. इस डेटा का इस्तेमाल फ़िंगरप्रिंटिंग के लिए किया जा सकता है. इस वजह से, इस एपीआई के लिए यह ज़रूरी है कि लौटाए गए डेटा को लौटाने से पहले क्रम से लगाया जाए.

सुरक्षा और अनुमतियां

Chrome की टीम ने लोकल फ़ॉन्ट ऐक्सेस एपीआई को डिज़ाइन और लागू करने के लिए, वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं का ऐक्सेस कंट्रोल करना लेख में बताए गए मुख्य सिद्धांतों का पालन किया है. इन सिद्धांतों में उपयोगकर्ता कंट्रोल, पारदर्शिता, और एल्गोरिदम की जानकारी शामिल है.

उपयोगकर्ता कंट्रोल

उपयोगकर्ता के फ़ॉन्ट का ऐक्सेस पूरी तरह से कंट्रोल किया जा सकता है. इसे तब तक ऐक्सेस नहीं किया जा सकता, जब तक "local-fonts" से जुड़ी अनुमति न दी जाए, जैसा कि अनुमति रजिस्ट्री में बताया गया है.

पारदर्शिता

किसी साइट को उपयोगकर्ता के लोकल फ़ॉन्ट का ऐक्सेस दिया गया है या नहीं, यह जानकारी साइट की जानकारी वाली शीट में दिखेगी.

अनुमति का बने रहना

पेज फिर से लोड होने के दौरान "local-fonts" की अनुमति बनी रहेगी. इसे साइट की जानकारी शीट की मदद से वापस लिया जा सकता है.

सुझाव/राय दें या शिकायत करें

Chrome टीम, Local Font Access API के साथ आपके अनुभव के बारे में जानना चाहती है.

हमें इस एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या ऐसा नहीं है कि अपना आइडिया लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं जिनकी ज़रूरत आपको है? क्या सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है? इससे जुड़े GitHub रेपो के बारे में कोई खास समस्या दर्ज करें या किसी मौजूदा समस्या पर अपने विचार जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करें

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है? new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी शामिल करें, सामग्री को फिर से बनाने के आसान निर्देश दें और घटक बॉक्स में Blink>Storage>FontAccess डालें. Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.

एपीआई के साथ काम करता है

क्या आपको लोकल फ़ॉन्ट ऐक्सेस एपीआई इस्तेमाल करना है? आपकी सार्वजनिक सहायता से Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है और अन्य ब्राउज़र वेंडर को यह पता चलता है कि उनकी सहायता करना कितना ज़रूरी है.

हैशटैग #LocalFontAccess का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.

स्वीकार हैं

Local Font Access API के स्पेसिफ़िकेशन में एमिल ए॰ एक्लंड, ऐलेक्स रसेल, जोशुआ बेल, और ऑलिवर यिप्टॉन्ग. इस लेख की समीक्षा जो मेडली, Dominik Röttsches, और ऑलिवर यीप्टॉन्ग ने की है. Unsplash पर ब्रैट जॉर्डन की हीरो इमेज.