सीएसएस गुण जो फ़ॉन्ट रेंडरिंग को प्रभावित करते हैं

जब वेब पर एक फ़ॉन्ट प्रदान करने की बात आती है, तो एक डिजाइनर थोड़ा कर सकता है। जिस तरह से फ़ॉन्ट स्क्रीन पर दिखता है, अधिकांश भाग के लिए, ऑपरेटिंग सिस्टम, ब्राउज़र, हेडसेट डिज़ाइन, फ़ॉन्ट फ़ाइलों पर निर्भर करता है, और क्या ये फाइलें सबसे अप्रत्याशित रेंडरिंग परिदृश्यों के निर्देशों के साथ पूरक हैं। लेकिन कभी-कभी CSS गुण प्रभावित कर सकते हैं कि फ़ॉन्ट कैसा दिखता है।




नोट: स्क्रीनशॉट मैक ओएस 10.6 पर सफारी 5 में फोंट का प्रतिपादन दिखाते हैं।

फ़ॉन्ट आकार

फ़ॉन्ट आकार में थोड़ा सा बदलाव हेडसेट की उपस्थिति को बहुत प्रभावित कर सकता है

सबसे पहले, एक font-size संपत्ति है। आधुनिक स्क्रीन के लिए पर्याप्त आकार के लिए वेक्टर फ़ॉन्ट की रेखांकन का अर्थ है कि प्रत्येक अक्षर केवल मुट्ठी भर पिक्सेल द्वारा दर्शाया गया है। इसलिए, फ़ॉन्ट आकार में एक छोटा सा अंतर हेडसेट की उपस्थिति को बहुत प्रभावित कर सकता है।

रंग

color गुण एक और महत्वपूर्ण कारक है। पाठ और पृष्ठभूमि के रंगों के बीच विपरीत को बदलकर, आप हेडसेट की उपस्थिति में ध्यान देने योग्य अंतर प्राप्त कर सकते हैं। एंटी-अलियासिंग कम विपरीत के साथ कम ध्यान देने योग्य दिखता है - अग्रभूमि (फ़ॉन्ट रंग) से पृष्ठभूमि में संक्रमण कम आकर्षक हो जाता है।


उच्च विपरीत; एक प्रकाश पृष्ठभूमि पर अंधेरे पाठ


कम विपरीत


एक अंधेरे पृष्ठभूमि पर प्रकाश पाठ

एक अंधेरे पृष्ठभूमि पर हल्का पाठ, एक नियम के रूप में, एक प्रकाश एक पर अंधेरे की तुलना में मोटा दिखता है (शॉन ब्लैंक द्वारा इस विषय पर अध्ययन भी देखें), इसलिए, ऐसे मामलों में, कम विपरीत पर विशेष ध्यान दिया जाना चाहिए। ध्यान रखें कि इसके विपरीत अभाव से पाठकों की दृष्टि बाधित हो सकती है। द कलर कंट्रास्ट चेक यूटिलिटी, जोनाथन स्नूक द्वारा लिखित, WCAG अनुपालन के लिए पृष्ठभूमि और अग्रभूमि रंग की जाँच करता है।

WebKit और फ़ॉन्ट चौरसाई

-webkit-font-smoothing संपत्ति (जो WebKit समर्थन वाले केवल ब्राउज़रों में काम करती है) डिज़ाइनर को तीन विकल्पों में से एक को निर्दिष्ट करने की अनुमति देती है: सबपिक्सल-एंटियालियाड (डिफ़ॉल्ट रूप से), एंटीअलियासिड या कोई नहीं। टिम वान डेमे ने दिखाया कि "एंटीलाइज़्ड" मूल्य पाठ को मैक सफारी में अधिक सूक्ष्म बनाने के लिए जाता है, जो डिजाइनर, जो पहले से text-shadow रूप में असंगत गुणों का उपयोग करते थे, पाठ को कम अजीब दिखने के लिए बहुत प्रसन्न थे।

अन्य दोस्तों ने पाठ को पतला करने के साधन के रूप में -webkit-font-smoothing के उपयोग पर सवाल उठाया है, हालांकि यह एक उपसर्ग है और पोस्ट हैक नहीं है । क्रिस्टोफ़ ज़िल्गेन्स का दावा है कि उप-रूपी एंटी-अलियासिंग अक्षम के साथ विकर्ण सेरिफ़्स खराब दिखते हैं ; दिमित्री फादेव का कहना है कि छोटा पाठ कम कठोर है ।

रोटेशन

शायद, यह स्पष्ट है कि पाठ के रोटेशन से प्रतिपादन के साथ समस्याएं होती हैं। फ्लैट सीएसएस 3 रूपांतरण, जैसा कि एंडी क्लार्क ने अपने टाइपेकिट पोस्ट में समझाया, डिजाइनरों को तत्वों को घुमाने की अनुमति देता है; यद्यपि इस चिप के साथ आप वांछित ग्राफिक परिणाम प्राप्त कर सकते हैं, एक गैर-क्षैतिज सेट रेंडरिंग का वास्तविक विल्ड है। सौभाग्य से, उच्च-रिज़ॉल्यूशन स्क्रीन पर ये प्रभाव कम ध्यान देने योग्य हैं।


पाठ का स्क्रीनशॉट 90 ^ओ घुमाया गया; छवि का विस्तार हुआ


पाठ का स्क्रीनशॉट 45 ^o घुमाया गया; छवि का विस्तार हुआ


सफ़ारी मोबाइल पर पाठ का स्क्रीनशॉट 45 ^o घुमाया गया; छवि का विस्तार हुआ

निष्कर्ष

फ़ॉन्ट रेंडरिंग वेब डिजाइनर के लिए लगभग प्रतिरक्षा है। लेकिन यह याद रखना महत्वपूर्ण है कि आप कुछ नियंत्रित शैलियों का उपयोग करके वांछित परिणाम प्राप्त कर सकते हैं। परीक्षण प्रक्रिया के दौरान, यह मत भूलो कि विपरीत, आकार, रंग और घुमाव के लिए विभिन्न शैलियों से महत्वपूर्ण अंतर हो सकता है।