टाइपोग्राफिक डिज़ाइन एक सफल वेबसाइट डिज़ाइन का एक महत्वपूर्ण रूप से महत्वपूर्ण हिस्सा है। प्रत्येक वेब डिज़ाइन पेशेवर का लक्ष्य ऐसे टेक्स्ट वाली साइटें बनाना है जो पढ़ने में आसान हों और जो बहुत अच्छी लगे। इसे प्राप्त करने के लिए, आपको उन विशिष्ट फोंट को सेट करने में सक्षम होने की आवश्यकता होगी जिन्हें आप अपने वेब पेजों पर उपयोग करना चाहते हैं। अपने वेब दस्तावेज़ों पर टाइपफेस या फ़ॉन्ट परिवार निर्दिष्ट करने के लिए, आप अपने में फ़ॉन्ट-पारिवारिक शैली संपत्ति का उपयोग करेंगे सीएसएस.
सबसे जटिल फ़ॉन्ट-पारिवारिक शैली जिसका आप उपयोग कर सकते हैं, उसमें केवल एक फ़ॉन्ट परिवार शामिल होगा:
पी {
फ़ॉन्ट-परिवार: एरियल;
}
यदि आपने इस शैली को किसी पृष्ठ पर लागू किया है, तो सभी अनुच्छेद "एरियल" फ़ॉन्ट परिवार में प्रदर्शित होंगे। यह बहुत अच्छा है और चूंकि "एरियल" को "वेब-सुरक्षित फ़ॉन्ट" के रूप में जाना जाता है, जिसका अर्थ है अधिकांश (यदि सभी नहीं) कंप्यूटर ने इसे स्थापित किया होगा, आप यह जानकर आराम कर सकते हैं कि आपका पृष्ठ इच्छित में प्रदर्शित होगा फ़ॉन्ट।
तो क्या होगा यदि आपके द्वारा चुना गया फ़ॉन्ट नहीं मिल सकता है? उदाहरण के लिए, यदि आप किसी पृष्ठ पर "वेब-सुरक्षित फ़ॉन्ट" का उपयोग नहीं करते हैं, तो उपयोगकर्ता एजेंट के पास वह फ़ॉन्ट नहीं होने पर क्या करता है? वे एक प्रतिस्थापन करते हैं।
इसके परिणामस्वरूप कुछ मनोरंजक दिखने वाले पृष्ठ हो सकते हैं। मैं एक बार एक पेज पर गया था जहां मेरे कंप्यूटर ने इसे पूरी तरह से "विंगडिंग्स" (एक आइकन-सेट) में प्रदर्शित किया था क्योंकि मेरे कंप्यूटर में नहीं था वह फ़ॉन्ट जिसे डेवलपर ने निर्दिष्ट किया था, और मेरे ब्राउज़र ने एक संक्षिप्त विकल्प बनाया कि वह किस फ़ॉन्ट का उपयोग करेगा a प्रतिस्थापन। पेज मेरे लिए पूरी तरह से अपठनीय था! यह वह जगह है जहाँ एक फ़ॉन्ट स्टैक चलन में आता है।
एक फ़ॉन्ट स्टैक में अल्पविराम से एकाधिक फ़ॉन्ट परिवारों को अलग करें
एक "फ़ॉन्ट स्टैक" फोंट की एक सूची है जिसे आप अपने पृष्ठ का उपयोग करना चाहते हैं। आप अपने फ़ॉन्ट विकल्पों को अपनी पसंद के क्रम में रखेंगे और प्रत्येक को अल्पविराम से अलग करेंगे। यदि ब्राउज़र में सूची में पहला फ़ॉन्ट परिवार नहीं है, तो यह दूसरे और फिर तीसरे और इसी तरह से कोशिश करेगा जब तक कि उसे सिस्टम पर मौजूद एक नहीं मिल जाता।
फ़ॉन्ट-परिवार: पुसीकैट, अल्जीरियाई, ब्रॉडवे;
उपरोक्त उदाहरण में, ब्राउज़र पहले "पुसीकैट" फ़ॉन्ट की तलाश करेगा, फिर "अल्जीरियाई" फिर "ब्रॉडवे" यदि कोई अन्य फ़ॉन्ट नहीं मिला। यह आपको इस बात का अधिक मौका देता है कि आपके चुने हुए फोंट में से कम से कम एक का उपयोग किया जाएगा। यह सही नहीं है, यही वजह है कि हमारे पास अभी और भी बहुत कुछ है जिसे हम अपने फॉन्ट स्टैक में जोड़ सकते हैं (पढ़ें!)
अंतिम जेनेरिक फ़ॉन्ट्स का उपयोग करें
तो आप फोंट की सूची के साथ एक फ़ॉन्ट स्टैक बना सकते हैं और अभी भी इनमें से कोई भी ब्राउज़र नहीं ढूंढ सकता है। यदि ब्राउज़र खराब प्रतिस्थापन विकल्प बनाता है, तो आप नहीं चाहते कि आपका पृष्ठ अपठनीय दिखाई दे। सौभाग्य से CSS के पास इसके लिए भी एक समाधान है, और इसे कहा जाता है सामान्य फोंट.
आपको हमेशा अपनी फ़ॉन्ट सूची को समाप्त करना चाहिए (भले ही वह एक परिवार या केवल वेब-सुरक्षित फ़ॉन्ट की सूची हो) एक सामान्य फ़ॉन्ट के साथ। पाँच हैं जिनका आप उपयोग कर सकते हैं:
- कर्सिव
- कपोल कल्पित
- एकलस्पेस
- सान्स सेरिफ़
- सेरिफ़
उपरोक्त दो उदाहरणों को इसमें बदला जा सकता है:
फ़ॉन्ट-परिवार: एरियल, सेन्स-सेरिफ़;
या।
फ़ॉन्ट-परिवार: पुसीकैट, अल्जीरियाई, ब्रॉडवे, फंतासी;
कुछ फ़ॉन्ट परिवार के नाम दो या दो से अधिक शब्द हैं
यदि आप जिस फ़ॉन्ट परिवार का उपयोग करना चाहते हैं वह एक से अधिक शब्द है, तो आपको इसे दोहरे-उद्धरण चिह्नों से घेरना चाहिए। जबकि कुछ ब्राउज़र बिना उद्धरण चिह्नों के फ़ॉन्ट परिवारों को पढ़ सकते हैं, यदि व्हॉट्सएप को संघनित या अनदेखा किया जाता है तो समस्याएँ हो सकती हैं।
फ़ॉन्ट-परिवार: "टाइम्स न्यू रोमन", सेरिफ़;
इस उदाहरण में, आप देख सकते हैं कि फ़ॉन्ट नाम "टाइम्स न्यू रोमन", जो बहु-शब्द है, उद्धरणों में संलग्न है। यह ब्राउज़र को बताता है कि ये तीनों शब्द उस फ़ॉन्ट नाम का हिस्सा हैं, तीन अलग-अलग फोंट के विपरीत सभी एक-शब्द नामों के साथ।