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

Janicklas Ralph James
Janicklas Ralph James
X

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

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

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

बैकग्राउंड

font-display: swap का इस्तेमाल आम तौर पर, एफ़ओआईटी (न दिखने वाले टेक्स्ट का फ़्लैश) से बचने और स्क्रीन पर कॉन्टेंट को तेज़ी से दिखाने के लिए किया जाता है. 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;
}

Next/font पर माइग्रेट करने के लिए:

  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> ); }

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

@next/font/google के लिए: यह एक बूलियन वैल्यू है. इससे यह तय किया जाता है कि कुल लेआउट शिफ़्ट को कम करने के लिए, अपने-आप फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया जाए या नहीं. डिफ़ॉल्ट रूप से, 'सही' होता है. Next.js आपके फ़ॉलबैक फ़ॉन्ट को Arial या Times New Roman पर अपने-आप सेट कर देता है. यह इस बात पर निर्भर करता है कि फ़ॉन्ट टाइप (सेरिफ़ बनाम San-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 का इस्तेमाल नहीं किया जा रहा है, तो फ़ॉन्टेन का इस्तेमाल किया जा सकता है. फ़ॉन्टेन एक ऐसी लाइब्रेरी है जो @numtjs/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 के इस्तेमाल से जुड़ा दस्तावेज़ यहां देखा जा सकता है.

उदाहरण

इस उदाहरण पर विचार करें: आपको लॉबस्टर को वेब फ़ॉन्ट के तौर पर चुनना है. अब इसमें IAB Neue और उसके बाद आ गए सभी फ़ॉन्ट शामिल हैं. सीएसएस में, 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));

स्वीकार की गई

Unस्प्लैश पर अलेक्ज़ेंडर एंड्रूज़ की हीरो इमेज.