मेरे पास एक सामान्य css फ़ाइल है जिसमें सभी फ़ॉन्ट हैं जिनका वेबसाइट उपयोग कर रही है (स्थानीय)।

अंदर मेरे पास उदाहरण के लिए है:

    @font-face {
      font-family: "LemonMilk";
      src: url("../fonts/LemonMilk.otf");
    }
.....
  .LemonMilk{
    font-family: "LemonMilk" ;
    font-size: 4vh;
  }

मेरे पास उनमें से बहुत से हैं, लेकिन कुछ पृष्ठों को उनमें से केवल कुछ ही चाहिए, लेकिन फिर भी मैं प्रत्येक पृष्ठ के लिए पूरी फ़ाइल लोड करता हूं:

<head>
....
 <link rel="stylesheet"  href="../css/style.css"/>

समस्या: मेरे अधिकांश पृष्ठ उन्हें लोड करने में विलंब करेंगे और एक या 2 सेकंड के लिए सिस्टम फोंट दिखाएंगे।

कोशिश की गई:

<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">

जो एक चेतावनी संदेश देते हैं कि वे where loaded but never used within a few seconds of page loading. लेकिन मैं उनका तुरंत उपयोग करता हूं।

प्रश्न:

  1. देरी को कैसे कम करें?

  2. अगर मैं एक css सभी फ़ॉन्ट के साथ शामिल करता हूं, तो क्या वह उन फ़ॉन्ट्स को भी लोड करेगा जिनका मैं उपयोग नहीं करता?

  3. preload ने काम क्यों नहीं किया ?

1
hkrly 7 अगस्त 2019, 11:21

1 उत्तर

सबसे बढ़िया उत्तर

CSS में @font-face का उपयोग करते समय, यह ब्राउज़र पर निर्भर करता है कि यह कैसा व्यवहार करता है।

फोंट घोषित करने के लिए बाहरी सीएसएस शीट का उपयोग करना अच्छा है। यदि यह मदद नहीं करता है, तो आप अलग-अलग उपपृष्ठों के लिए फोंट के साथ अलग-अलग सीएसएस फाइलें बनाने का प्रयास कर सकते हैं। जैसा कि आपने उल्लेख किया है, आप सभी उपपृष्ठों पर सभी फोंट का उपयोग नहीं करते हैं, इसलिए यह फाइलों का आकार कम कर सकता है और परिणामस्वरूप तेजी से लोड हो सकता है। एक बार मैं एक प्रोजेक्ट पर बहुत सारे फोंट के साथ काम कर रहा था और मुझे भी इसी तरह की समस्या थी। सबसे अच्छा समाधान तब बेस 64 को मेरे द्वारा उपयोग किए जाने वाले सभी फोंट को एन्कोड करना था। तो उस दृष्टिकोण से, HTML को पार्स और प्रदर्शित करने से पहले सभी फोंट को लोड किया जाना था। फ़ॉन्ट गिलहरी का वेबफ़ॉन्ट जनरेटर यहाँ मिला: https://www.fontsquirrel.com/tools/webfont-generator वास्तव में सहायक उपकरण हो सकता है। यदि आप इसका उपयोग करेंगे तो आपको "विशेषज्ञ" और "बेस 64 एनकोड" पर क्लिक करना चाहिए। इसके अलावा, परीक्षण और यह देखने के लिए कि आपका लोड समय कैसे सुधरता है, आप यहां Fontloader देख सकते हैं: https://github.com /smnh/FontLoader। यह पता लगाता है कि ब्राउज़र द्वारा निर्दिष्ट फ़ॉन्ट-परिवार के फोंट कब लोड और प्रस्तुत किए जाते हैं ताकि आप देख सकें कि कौन सा कदम सबसे अधिक समय ले रहा है।

1
Sandi Pečečnik 7 अगस्त 2019, 11:44