फ़ॉन्ट फ़ॉलबैक के लिए फ़्रेमवर्क टूल

जेनिकलस राल्फ़ जेम्स

Twitter

जिन साइटों पर font-display: अदला-बदली वाली फ़ॉन्ट लोड की जाती हैं उन्हें आम तौर पर लेआउट शिफ़्ट (सीएलएस) का सामना करना पड़ता है. ऐसा तब होता है, जब वेब फ़ॉन्ट लोड होता है और इसे फ़ॉलबैक फ़ॉन्ट से बदल दिया जाता है.

फ़ॉलबैक फ़ॉन्ट के डाइमेंशन में बदलाव करके, सीएलएस को रोका जा सकता है, ताकि वह मुख्य फ़ॉन्ट से मेल खाए. @font-face नियम में size-adjust, ascent-override, descent-override, और line-gap-override जैसी प्रॉपर्टी की मदद से, फ़ॉलबैक फ़ॉन्ट की मेट्रिक को बदला जा सकता है. इससे डेवलपर को फ़ॉन्ट दिखाने के तरीके पर ज़्यादा कंट्रोल मिलता है. फ़ॉन्ट फ़ॉलबैक और ओवरराइड प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, इस पोस्ट पर जाएं. इस डेमो में आप यह देख सकते हैं कि इस तकनीक को कैसे लागू किया गया है.

इस लेख में बताया गया है कि फ़ॉलबैक फ़ॉन्ट सीएसएस को जनरेट करने और सीएलएस को कम करने के लिए, Next.js और Nuxt.js फ़्रेमवर्क में फ़ॉन्ट साइज़ को घटाने या बढ़ाने की सुविधा कैसे लागू की जाती है. इससे यह भी पता चलता है कि फ़ॉन्टेन और Capsize जैसे क्रॉस-कटिंग टूल का इस्तेमाल करके, फ़ॉलबैक फ़ॉन्ट कैसे जनरेट किए जा सकते हैं.

बैकग्राउंड

font-display: अदला-बदली करें का इस्तेमाल आम तौर पर एफ़ओआईटी (न दिखने वाले टेक्स्ट का फ़्लैश) रोकने और स्क्रीन पर कॉन्टेंट तेज़ी से दिखाने के लिए किया जाता है. swap की वैल्यू से ब्राउज़र को पता चलता है कि फ़ॉन्ट का इस्तेमाल करने वाला टेक्स्ट, सिस्टम फ़ॉन्ट का इस्तेमाल करके तुरंत दिखाया जाना चाहिए. साथ ही, कस्टम फ़ॉन्ट तैयार होने पर ही उसे सिस्टम फ़ॉन्ट बदला जाना चाहिए.

swap के साथ सबसे बड़ी समस्या परेशान करने वाला इफ़ेक्ट है, क्योंकि दो फ़ॉन्ट के वर्ण के साइज़ में अंतर होने की वजह से, स्क्रीन का कॉन्टेंट बदल जाता है. इससे सीएलएस स्कोर खराब हो जाता है, खास तौर पर उन वेबसाइटों के मामले में जिनमें बहुत ज़्यादा टेक्स्ट होते हैं.

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

फ़ॉन्ट साइज़ को अडजस्ट किए बिना

body {
  font-family: Inter, serif;
}

फ़ॉन्ट का साइज़ अडजस्ट करने के बाद

body {
  font-family: Inter, fallback-inter, serif;
  }

@font-face {
  font-family: "fallback-inter";
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0.00%;
  size-adjust: 107.40%;
  src: local("Arial");
}

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

Next.js की मदद से फ़ॉन्ट फ़ॉलबैक को ऑप्टिमाइज़ करने का तरीका

Next.js में, फ़ॉलबैक फ़ॉन्ट ऑप्टिमाइज़ेशन चालू करने का विकल्प मौजूद है. जब @next/font कॉम्पोनेंट का इस्तेमाल करके फ़ॉन्ट लोड किए जाते हैं, तो यह सुविधा डिफ़ॉल्ट रूप से चालू हो जाती है.

@next/font कॉम्पोनेंट को Next.js के वर्शन 13 में लॉन्च किया गया था. यह कॉम्पोनेंट, आपके पेजों में Google फ़ॉन्ट या कस्टम फ़ॉन्ट इंपोर्ट करने के लिए, एपीआई उपलब्ध कराता है. साथ ही, इसमें फ़ॉन्ट फ़ाइलों को खुद से होस्ट करने की सुविधा पहले से मौजूद होती है.

इस्तेमाल किए जाने पर, फ़ॉलबैक फ़ॉन्ट मेट्रिक अपने-आप कैलकुलेट होती हैं और उन्हें सीएसएस फ़ाइल में इंजेक्ट किया जाता है.

उदाहरण के लिए, अगर Roboto फ़ॉन्ट का इस्तेमाल किया जा रहा है, तो आम तौर पर इसे सीएसएस में इस तरह से तय किया जाएगा:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

body {
  font-family: Roboto;
}

अगले/फ़ॉन्ट पर माइग्रेट करने के लिए:

1. 'next/font' से 'Roboto' फ़ंक्शन को इंपोर्ट करके, Roboto फ़ॉन्ट की जानकारी को अपनी JavaScript में ले जाएं. फ़ंक्शन की रिटर्न वैल्यू एक क्लास का नाम होगी, जिसका इस्तेमाल अपने कॉम्पोनेंट टेंप्लेट में किया जा सकता है. सुविधा को चालू करने के लिए, कॉन्फ़िगरेशन ऑब्जेक्ट में display: swap जोड़ना न भूलें.

    import { Roboto } from '@next/font/google';
   
   const roboto = Roboto({
     weight: '400',
     subsets: ['latin'],
     display: 'swap' // Using display swap automatically enables the feature
   })
   

2. अपने कॉम्पोनेंट में, जनरेट किए गए क्लास के नाम का इस्तेमाल करें: javascript export default function RootLayout({ children }: { children: React.ReactNode; }) { return ( <html lang="en" className={roboto.className}> <body>{children}</body> </html> ); }

ध्यान दें: next/font कॉम्पोनेंट को इस तरह से डिज़ाइन किया गया है कि यह सिर्फ़ ' पैटर्न' और 'टाइम्स न्यू रोमन' जैसे फ़ॉलबैक फ़ॉन्ट के साथ काम करता है. यह विकल्प इसलिए चुना गया, क्योंकि इसे सभी प्लैटफ़ॉर्म पर एरियल और Times New रोमन फ़ॉन्ट के लिए इस्तेमाल किया जा सकता था.

adjustFontFallback कॉन्फ़िगरेशन का विकल्प:

@next/font/google के लिए: एक बूलियन वैल्यू, जो यह तय करती है कि कुल लेआउट शिफ़्ट को कम करने के लिए, ऑटोमैटिक फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करना चाहिए या नहीं. डिफ़ॉल्ट वैल्यू 'सही' पर सेट होती है. Next.js, आपके फ़ॉलबैक फ़ॉन्ट को अपने-आप Arial या Times New Roman पर सेट कर देता है. यह फ़ॉन्ट टाइप (सेरिफ़ बनाम Sans-Serif) के हिसाब से तय होता है.

@next/font/local के लिए: एक स्ट्रिंग या बूलियन गलत वैल्यू, जो यह तय करती है कि कुल लेआउट शिफ़्ट को कम करने के लिए, ऑटोमैटिक फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करना चाहिए या नहीं. संभावित वैल्यू Arial, Times New Roman या false हो सकती हैं. डिफ़ॉल्ट वैल्यू Arial है. अगर आपको सेरिफ़ फ़ॉन्ट का इस्तेमाल करना है, तो इस वैल्यू को Times New Roman पर सेट करें.

Google Fonts के लिए एक और विकल्प

अगर next/font कॉम्पोनेंट का इस्तेमाल करने का विकल्प नहीं है, तो Google Fonts में इस सुविधा को इस्तेमाल करने का दूसरा तरीका optimizeFonts फ़्लैग के ज़रिए है. Next.js में, OptimizeFonts की सुविधा डिफ़ॉल्ट रूप से पहले से चालू है. यह सुविधा, एचटीएमएल रिस्पॉन्स में Google फ़ॉन्ट सीएसएस को इनलाइन करती है. इसके अलावा, अगले स्निपेट में दिखाए गए तरीके का इस्तेमाल करके, next.config.js में experimental.adjustFontFallbacksWithSizeAdjust फ़्लैग सेट करके फ़ॉन्ट फ़ॉलबैक अडजस्टमेंट सुविधा को चालू किया जा सकता है:

// In next.config.js
module.exports = {
 experimental: {
   adjustFontFallbacksWithSizeAdjust: true,
 },
}

ध्यान दें: हाल ही में लॉन्च की गई app दिशा-निर्देशों से, यह सुविधा काम नहीं करेगी. लंबे समय तक, बेहतर होगा कि आप next/font का इस्तेमाल करें.

Nuxt की मदद से फ़ॉन्ट फ़ॉलबैक में बदलाव करने का तरीका

@nuxtjs/fontaine, Nuxt.js फ़्रेमवर्क के लिए एक मॉड्यूल है. यह फ़ॉलबैक फ़ॉन्ट मेट्रिक की वैल्यू अपने-आप कैलकुलेट करता है और फ़ॉलबैक @font-face सीएसएस को जनरेट करता है.

अपने मॉड्यूल कॉन्फ़िगरेशन में @nuxtjs/fontaine जोड़कर, मॉड्यूल को चालू करें:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
})

अगर Google Fonts इस्तेमाल किए जाते हैं या किसी फ़ॉन्ट के लिए @font-face का एलान नहीं किया गया है, तो उन्हें अन्य विकल्प के तौर पर सेट किया जा सकता है.

ज़्यादातर मामलों में, मॉड्यूल आपके सीएसएस से @font-face नियमों को पढ़ सकता है और अपने-आप फ़ॉन्ट-फ़ैमिली, फ़ॉलबैक फ़ॉन्ट फ़ैमिली, और डिसप्ले टाइप जैसी जानकारी का अनुमान लगा सकता है.

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

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
  fontMetrics: {
  fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
},
})

मॉड्यूल अपने-आप आपकी सीएसएस को स्कैन करता है, ताकि @font-face के एलान को पढ़ा जा सके और फ़ॉलबैक @font-face के नियम जनरेट किए जा सकते हैं.

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}
/* This will be generated. */
@font-face {
  font-family: 'Roboto override';
  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
    local('Arial'), local('Noto Sans');
  ascent-override: 92.7734375%;
  descent-override: 24.4140625%;
  line-gap-override: 0%;
}

अब आप अपनी सीएसएस में Roboto override को फ़ॉलबैक फ़ॉन्ट के तौर पर इस्तेमाल कर सकते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है

:root {
  font-family: 'Roboto';
  /* This becomes */
  font-family: 'Roboto', 'Roboto override';
}

सीएसएस को खुद जनरेट करना

स्टैंडअलोन लाइब्रेरी से भी आपको फ़ॉलबैक के फ़ॉन्ट साइज़ में बदलाव करने के लिए, सीएसएस जनरेट करने में मदद मिल सकती है.

फ़ॉन्टेन लाइब्रेरी का इस्तेमाल किया जा रहा है

अगर Nuxt या Next.js का इस्तेमाल नहीं किया जा रहा है, तो फ़ॉन्टेन का इस्तेमाल किया जा सकता है. फ़ॉन्टेन, @nuxtjs/fontaine को चलाने वाली खास लाइब्रेरी है. अपने प्रोजेक्ट में इस लाइब्रेरी का इस्तेमाल करके, Vite या Webpack प्लगिन का इस्तेमाल करके फ़ॉलबैक फ़ॉन्ट सीएसएस को अपने-आप इंजेक्ट किया जा सकता है.

मान लें कि आपकी सीएसएस फ़ाइल में Roboto फ़ॉन्ट दिया गया है:

@font-face {
  font-family: 'Roboto';
  font-display: swap;
  src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
  font-weight: 700;
}

फ़ॉन्टेन, Vite और Webpack ट्रांसफ़ॉर्मर की सुविधा देता है, ताकि वे बिल्ड चेन में आसानी से प्लग-इन कर सकें. इसके लिए, नीचे दी गई JavaScript की मदद से, प्लगिन को चालू किया जा सकता है.

import { FontaineTransform } from 'fontaine'

const options = {
  fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
  // You may need to resolve assets like `/fonts/Roboto.woff2` to a particular directory
  resolvePath: (id) => 'file:///path/to/public/dir' + id,
  // overrideName: (originalName) => `${name} override`
  // sourcemap: false
}

अगर Vite का इस्तेमाल किया जा रहा है, तो प्लगिन को इस तरह से जोड़ें: javascript // Vite export default { plugins: [FontaineTransform.vite(options)] }

अगर Webpack का इस्तेमाल किया जा रहा है, तो इसे इस तरह चालू करें:

// Webpack
export default {
  plugins: [FontaineTransform.webpack(options)]
}

मॉड्यूल अपने-आप आपकी फ़ाइलों को स्कैन करेगा, ताकि @font-face के नियमों में बदलाव किए जा सकें: css @font-face { font-family: 'Roboto'; font-display: swap; src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff'); font-weight: 700; } /* This will be generated. */ @font-face { font-family: 'Roboto override'; src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial'), local('Noto Sans'); ascent-override: 92.7734375%; descent-override: 24.4140625%; line-gap-override: 0%; }

अब आप सीएसएस में Roboto override को फ़ॉलबैक फ़ॉन्ट के तौर पर इस्तेमाल कर सकते हैं. css :root { font-family: 'Roboto'; /* This becomes */ font-family: 'Roboto', 'Roboto override'; }

Capsize लाइब्रेरी का इस्तेमाल करना

अगर Next.js, Nuxt, Webpack या Vite का इस्तेमाल नहीं किया जा रहा है, तो फ़ॉलबैक सीएसएस को जनरेट करने के लिए Capsize Library का इस्तेमाल करें.

नया createFontStack एपीआई

यह एपीआई, createFontStack नाम के @capsize/core पैकेज का हिस्सा है. यह उसी क्रम में फ़ॉन्ट की मेट्रिक की कैटगरी को स्वीकार करता है जिस क्रम में आपने फ़ॉन्ट स्टैक (font-family प्रॉपर्टी) के बारे में बताया है.

आप Capsize का इस्तेमाल करने के बारे में जानकारी देने वाला दस्तावेज़ यहां देख सकते हैं.

उदाहरण

नीचे दिए गए उदाहरण पर ध्यान दें: आपको जिस वेब फ़ॉन्ट का इस्तेमाल करना है वह Lobster है. इसके बाद, यह सीएफ़ए नोए पर फिर से घुस जाता है. सीएसएस में, font-family: Lobster, 'Helvetica Neue', Arial.

1. कोर पैकेज से createFontStack को इंपोर्ट करें:

   import { createFontStack } from '@capsizecss/core';
   

2. हर मनचाहे फ़ॉन्ट के लिए फ़ॉन्ट मेट्रिक इंपोर्ट करें (ऊपर दी गई फ़ॉन्ट मेट्रिक देखें): javascript import lobster from '@capsizecss/metrics/lobster'; import helveticaNeue from '@capsizecss/metrics/helveticaNeue'; import arial from '@capsizecss/metrics/arial';`

3. फ़ॉन्ट स्टैक बनाएं और मेट्रिक को कलेक्शन के तौर पर पास करें. ऐसा उसी क्रम में करें जिस क्रम में फ़ॉन्ट-फ़ैमिली सीएसएस प्रॉपर्टी के ज़रिए किया जाता है. javascript const { fontFamily, fontFaces } = createFontStack([ lobster, helveticaNeue, arial, ]);

इससे नीचे दी गई जानकारी मिलती है:

{
  fontFamily: Lobster, 'Lobster Fallback: Helvetica Neue', 'Lobster Fallback: Arial',
  fontFaces: [
    {
      '@font-face' {
      'font-family': '"Lobster Fallback: Helvetica Neue"';
      src: local('Helvetica Neue');
      'ascent-override': '115.1741%';
      'descent-override': '28.7935%';
      'size-adjust': '86.8251%';
      }
     '@font-face' {
       'font-family': '"Lobster Fallback: Arial"';
       src: local('Arial');
       'ascent-override': 113.5679%;
       'descent-override': 28.392%;
       'size-adjust': 88.053%;
     }
   }
 ]
}

आपको अपनी सीएसएस में fontFamily और fontFaces कोड को जोड़ना होगा. नीचे दिया गया कोड दिखाता है कि इसे सीएसएस स्टाइल शीट या <style> ब्लॉक में कैसे लागू किया जाता है.

<style type="text/css">
  .heading {
    font-family: 
  }

  
</style>

इससे यह सीएसएस बनेगी:

.heading {
  font-family: Lobster, 'Lobster Fallback: Helvetica Neue',
    'Lobster Fallback: Arial';
}

@font-face {
  font-family: 'Lobster Fallback: Helvetica Neue';
  src: local('Helvetica Neue');
  ascent-override: 115.1741%;
  descent-override: 28.7935%;
  size-adjust: 86.8251%;
}
@font-face {
  font-family: 'Lobster Fallback: Arial';
  src: local('Arial');
  ascent-override: 113.5679%;
  descent-override: 28.392%;
  size-adjust: 88.053%;
}

ओवरराइड वैल्यू की गिनती करने के लिए, @capsize/metric पैकेज का इस्तेमाल भी किया जा सकता है. साथ ही, वैल्यू को सीएसएस पर खुद लागू करने के लिए भी, इस पैकेज का इस्तेमाल किया जा सकता है.

const fontMetrics = require(`@capsizecss/metrics/inter`);
const fallbackFontMetrics = require(`@capsizecss/metrics/arial`);
const mainFontAvgWidth = fontMetrics.xAvgWidth / fontMetrics.unitsPerEm;
const fallbackFontAvgWidth = fallbackFontMetrics.xAvgWidth / fallbackFontMetrics.unitsPerEm;
let sizeAdjust = mainFontAvgWidth / fallbackFontAvgWidth;
let ascent = fontMetrics.ascent / (unitsPerEm * fontMetrics.sizeAdjust));
let descent = fontMetrics.descent / (unitsPerEm * fontMetrics.sizeAdjust));
let lineGap = fontMetrics.lineGap / (unitsPerEm * fontMetrics.sizeAdjust));

स्वीकार हैं

Unsplash पर एलेक्ज़ेंडर एंड्रूज़ की हीरो इमेज.