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