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

जानें कि Local Font Access API की मदद से, लोगों के डिवाइस पर इंस्टॉल किए गए फ़ॉन्ट कैसे ऐक्सेस किए जा सकते हैं और उनके बारे में कम लेवल की जानकारी कैसे मिलती है

Thomas Steiner

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

यदि आप लंबे समय से वेब विकास कर रहे हैं, तो आपको वेब सेफ़ फ़ॉन्ट का इस्तेमाल करें. ये फ़ॉन्ट, सबसे ज़्यादा इस्तेमाल किए जाने वाले ऑपरेटिंग सिस्टम के तकरीबन सभी इंस्टेंस पर उपलब्ध हैं (जैसे, Windows, macOS, Linux के सबसे सामान्य डिस्ट्रिब्यूशन, Android, और iOS). 2000 के दशक की शुरुआत में, Microsoft ने पब्लिशर के लिए पहल इसे वेब के लिए 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 नाम का एक कॉर्पोरेट फ़ॉन्ट होता है.

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

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

लोकल फ़ॉन्ट ऐक्सेस एपीआई

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

वेब फ़ॉन्ट होने पर हमें Local Font Access API की ज़रूरत क्यों है?

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

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

Local Font Access API का इस्तेमाल करके, इन चुनौतियों को हल किया जा रहा है. इसके दो हिस्से होते हैं:

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

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

लोकल फ़ॉन्ट ऐक्सेस एपीआई को इस्तेमाल करने का तरीका

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

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

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

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

स्थानीय तौर पर इंस्टॉल किए गए फ़ॉन्ट की सूची पाने के लिए, आपको window.queryLocalFonts() को कॉल करना होगा. कॉन्टेंट बनाने पहली बार, इससे अनुमति का अनुरोध ट्रिगर होगा, जिसे उपयोगकर्ता स्वीकार या अस्वीकार कर सकता है. अगर उपयोगकर्ता इससे उनके लोकल फ़ॉन्ट के लिए क्वेरी करने की अनुमति मिलती है. ब्राउज़र, फ़ॉन्ट डेटा वाला कलेक्शन दिखाएगा जिसे आप लूप में चला सकते हैं. हर फ़ॉन्ट को family प्रॉपर्टी के साथ, FontData ऑब्जेक्ट के तौर पर दिखाया जाता है (उदाहरण के लिए, "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);
}

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

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

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

पूरा SFNT ऐक्सेस पाने के लिए, blob() तरीके का इस्तेमाल करें: FontData ऑब्जेक्ट. 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);
}

डेमो

Local Font Access API को यहां काम करते हुए देखा जा सकता है: डेमो में दी गई जानकारी देखें. यह भी देखना न भूलें कि सोर्स कोड के बारे में ज़्यादा जानें. डेमो <font-select> नाम का एक कस्टम एलिमेंट दिखाता है, जो लोकल फ़ॉन्ट पिकर लागू करता है.

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

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

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

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

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

ऐप्लिकेशन पर उपयोगकर्ताओं के कंट्रोल की जानकारी

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

पारदर्शिता

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

अनुमति का एक जैसा होना

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

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

Chrome टीम, लोकल फ़ॉन्ट ऐक्सेस एपीआई के साथ आपके अनुभव जानना चाहती है.

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

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

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

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

यह एपीआई काम करता है

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

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

मददगार लिंक

• पूरी जानकारी देने वाला वीडियो
• स्पेक्ट ड्राफ़्ट
• फ़ॉन्ट की गिनती के लिए Chromium की गड़बड़ी
• फ़ॉन्ट टेबल को ऐक्सेस करने में Chromium की गड़बड़ी
• ChromeStatus की एंट्री
• GitHub रेपो
• टैग की समीक्षा
• Mozilla के मानकों के हिसाब से रैंक

स्वीकार की गई

Local Font Access API की खास जानकारी में बदलाव किया गया एमिल ए॰ इकलंड, ऐलेक्स रसेल, Joshua Bell, और ऑलिवियर यिप्तॉन्ग. इस लेख की समीक्षा इन्होंने की है जो मेडली, डॉमिनिक रोचेस, और ऑलिवियर यिप्तॉन्ग. इन्होंने हीरो इमेज दी है इनके साथ ब्रैट जॉर्डन अनस्प्लैश.