Paul Irish
Chrome DevTools, अब आपको बता सकता है कि टेक्स्ट को रेंडर करने के लिए किस टाइपफ़ेस का इस्तेमाल किया जा रहा है.
फ़ॉन्ट स्टैक एक मज़ेदार चीज़ है. यह मांग के बजाय, सुझाव के तौर पर है. ऐसा हो सकता है कि आपने जो फ़ैमिली ग्रुप सुझाया है वह मौजूद न हो. इसलिए, हर उपयोगकर्ता के ब्राउज़र को फ़ॉल-थ्रू केस मैनेज करने की अनुमति दी जा रही है. इसके लिए, ब्राउज़र किसी ऐसे फ़ैमिली ग्रुप को ढूंढता है जो काम करेगा और उसका इस्तेमाल करता है.
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
डेवलपर के तौर पर, आपको यह जानना होगा कि असल में किस फ़ॉन्ट का इस्तेमाल किया जा रहा है. यह इस तरह से काम करता है:
कंप्यूट की गई स्टाइल में जाकर, आपको उस एलिमेंट के लिए इस्तेमाल किए गए टाइपफ़ेस की खास जानकारी दिखेगी. यहां कुछ बातों का ध्यान रखें:
- DevTools, Chrome की टेक्स्ट रेंडरिंग लेयर के इस्तेमाल किए गए असल टाइपफ़ेस की जानकारी दे रहा है. अब यह अनुमान लगाने की ज़रूरत नहीं है कि
serifयाsans-serifकिस फ़ॉन्ट में बदल रहा है. - क्या मेरा वेबफ़ॉन्ट काम कर रहा है? कभी-कभी यह पता लगाना मुश्किल होता है कि आपको वेबफ़ॉन्ट दिख रहा है या फ़ॉलबैक सिस्टम फ़ॉन्ट. अब पुष्टि की जा सकती है कि वेबफ़ॉन्ट लागू हो रहा है या नहीं. ऊपर दिए गए उदाहरण में, हम
::first-lineस्टाइल के लिए, Lobster को वेबफ़ॉन्ट के तौर पर डाउनलोड कर रहे हैं. - आपके स्टैक में फ़ॉल-थ्रू फ़ॉन्ट आसानी से दिखते हैं. ऊपर, टाइपिंग में गलती से Merriweather लिखा गया था. इसलिए, इसका इस्तेमाल नहीं किया गया और Lobster का इस्तेमाल किया गया.
- क्या यह Arial या Helvetica है? किसी डिज़ाइनर से पूछें या… DevTools से पूछें. ;)
- यह Google वेबफ़ॉन्ट, Typekit, लोकल फ़ॉन्ट, @font-face टाइपफ़ेस, यूनिकोड ग्लिफ़, और अन्य सभी दिलचस्प फ़ॉन्ट सोर्स के साथ बेहतर तरीके से काम करता है.
इसका आनंद लें. अगर आपका कोई सुझाव, शिकायत या राय है, तो कृपया टिप्पणी करें.