Back to Question Center
0

CSS फ़ॉन्ट आकार समायोजित करें के साथ वेब टाइपोग्राफी में सुधार करें            सीएसएस फ़ॉन्ट आकार के साथ वेब टाइपोग्राफी में सुधार सम्मिलित विषय: सीएसएस बूटस्ट्रैप SassFrameworksAudio & Semalt

1 answers:
सीएसएस फ़ॉन्ट आकार के साथ वेब टाइपोग्राफी में सुधार करें

CSS फ़ॉन्ट आकार समायोजित करें के साथ वेब टाइपोग्राफी में सुधार करेंसीएसएस फ़ॉन्ट आकार के साथ वेब टाइपोग्राफी में सुधार सम्मिलित विषय:
CSSBootstrapSassFrameworksAudio और Semalt

इस आलेख के साथ सहानुभूति की समीक्षा पयानोतिस मात्सिनोपोलोस ने की थी SitePoint सामग्री बनाने के लिए सभी साइटपॉईंट के समीक्षक समीक्षकों के लिए धन्यवाद, यह सबसे अच्छा हो सकता है!

सीएसएस में फ़ॉन्ट-आकार-समायोजित संपत्ति डेवलपर्स को अपरकेस अक्षरों के बजाय लोअरकेस अक्षरों की ऊंचाई के आधार पर फ़ॉन्ट-आकार निर्दिष्ट करने की अनुमति देती है। इससे वेब पर पाठ की स्पष्टता में काफी सुधार हो सकता है

इस आलेख में, आप फ़ॉन्ट-आकार समायोजित संपत्ति के महत्व और अपनी परियोजनाओं में इसे कैसे ठीक से उपयोग करें, इसके महत्व के बारे में जानेंगे।

फ़ॉन्ट आकार-समायोजन का महत्व

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

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

उदाहरण के लिए, यह सीएसएस नियम दिया गया है:

     शरीर {फ़ॉन्ट-परिवार: 'लाटो', वर्डाणा, सेन्स-सेरिफ़;}     

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

वेब फ़ॉन्ट का पहलू मूल्य क्या है?

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

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

इस तरह की स्थितियों में फ़ॉन्ट-आकार-समायोजन संपत्ति की भूमिका बहुत महत्वपूर्ण हो जाती है, क्योंकि इससे आपको सभी फ़ॉन्ट्स की एक्स-ऊँचाई एक ही मूल्य के रूप में सेट करने की अनुमति मिलती है जिससे उनकी सुवाह्यता में सुधार होता है।

फ़ॉन्ट-आकार समायोजित

के लिए सही मूल्य चुनना

अब जब आप फ़ॉन्ट-आकार-समायोजित संपत्ति का उपयोग करने के महत्व को जानते हैं, तो यह जानने का समय है कि आप इसे अपनी वेबसाइट पर कैसे उपयोग कर सकते हैं। इस संपत्ति में निम्नलिखित वाक्य रचना है:

     फ़ॉन्ट-आकार-समायोजन: कोई नहीं |        

प्रारंभिक मूल्य फ़ॉन्ट-आकार-समायोजित है कोई नहीं । मान कोई नहीं का अर्थ है कि अलग-अलग फ़ॉन्ट-परिवार विकल्पों के फ़ॉन्ट-आकार के मूल्य में कोई समायोजन नहीं किया जाएगा।

आप एक संख्या के लिए फ़ॉन्ट-आकार-समायोजन संपत्ति के मूल्य को भी सेट कर सकते हैं. एक्स-ऊँचाई दी गई संख्या के बराबर है फ़ॉन्ट-आकार । इससे छोटे आकारों में फ़ॉन्ट्स की पठनीयता में काफी सुधार हो सकता है। यहां फ़ॉन्ट-आकार-समायोजन संपत्ति का उपयोग करने का एक उदाहरण है

     फ़ॉन्ट-आकार: 20px;फ़ॉन्ट-आकार-समायोजन: 0. 6;     

सभी फ़ॉन्ट्स की एक्स-ऊंचाई अब 20px * 0. 6 = 12px होगी। किसी निश्चित फ़ॉन्ट के वास्तविक आकार को अब यह सुनिश्चित करने के लिए बदला जा सकता है कि एक्स-ऊंचाई हमेशा 12px पर रहता है। दिए गए फ़ॉन्ट के नए समायोजित फ़ॉन्ट-आकार को इस सूत्र का उपयोग करके गणना की जा सकती है:

सी = (ए / ए ') एस

यहाँ, सी का उपयोग करने के लिए समायोजित फ़ॉन्ट-आकार है, s निर्दिष्ट फ़ॉन्ट-आकार मान है, एक फ़ॉन्ट-आकार-समायोजित संपत्ति और एक ' द्वारा निर्दिष्ट पहलू मान है फ़ॉन्ट के पहलू का मान जिसे समायोजित करने की आवश्यकता है।

आप सेट नहीं कर सकते फ़ॉन्ट-आकार-समायोजित किसी नकारात्मक मान पर। 0 का एक मान बिना किसी ऊंचाई के पाठ में होगा दूसरे शब्दों में, पाठ प्रभावी रूप से छिपा होगा पुराने ब्राउज़रों में, फ़ायरफ़ॉक्स 40 जैसे, 0 का मान सेटिंग के बराबर है फ़ॉन्ट-आकार-समायोजित से कोई नहीं

अधिकांश मामलों में, डेवलपर्स आम तौर पर कुछ फ़ॉन्ट फ़ॉन्ट-आकार मूल्यों के साथ प्रयोग करते हैं, जो कि किसी दिए गए फ़ॉन्ट के लिए सबसे अच्छा लग रहा है। इसका अर्थ है कि आदर्श रूप से, वे सभी फ़ॉन्ट विकल्पों की एक्स-ऊंचाई अपने पहले पसंद फ़ॉन्ट के एक्स-ऊँचा के बराबर चाहते हैं। दूसरे शब्दों में, font-size-adjust संपत्ति के लिए सबसे उपयुक्त मान आपकी पहली पसंद फ़ॉन्ट का पहलू मान है।

एक फ़ॉन्ट के पहलू का मूल्य कैसे पता

किसी फ़ॉन्ट के लिए सही पहलू मान का निर्धारण करने के लिए, आप इस तथ्य पर भरोसा कर सकते हैं कि इसका समायोजित फ़ॉन्ट-आकार मूल फ़ॉन्ट-आकार जैसा कि आपने निर्दिष्ट किया है । इसका अर्थ है कि पिछले समीकरण में एक ' के बराबर होना चाहिए।

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

निम्नलिखित डेमो में, मैंने अक्षर 'टी' और 'बी' के चारों ओर एक सीमा बनाई है और प्रत्येक जोड़ी के लिए अलग-अलग फ़ॉन्ट-आकार समायोजित मान लागू किया है

प्रासंगिक स्निपेट को जमा करें:

     समायोजित- एक {फ़ॉन्ट-आकार-समायोजन: 0. 4;}। समायोजित-बी {फ़ॉन्ट आकार-समायोजन: 0. 495;}। समायोजित-सी {फ़ॉन्ट-आकार-समायोजन: 0 - gold and brown fascinator. 6;}     

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

पेनपेन पर साइटपॉईंट (@SitePoint) द्वारा पहलू का मूल्य निर्धारण पेन देखें

वेबसाइटों पर फ़ॉन्ट आकार-समायोजन का उपयोग करना

निम्न डेमो फॉन्ट-साइज-एडजस्ट मान का उपयोग करता है जिसे पिछले कोडपेन डेमो में 'लेटो' फोंट के लिए गणना की गई थी फ़ॉन्ट-साइज 'वर्डाना' , जो फ़ॉलबैक फ़ॉन्ट के रूप में कार्य करता है एक बटन समायोजन को चालू या बंद कर देगा ताकि आप अपने आप को अंतर देख सकें:

(1 9 3) कोडपेन पर साइटपॉईंट (@SitePoint) द्वारा वेबसाइट पर फॉन्ट-साइज-एडजस्ट का उपयोग करके पेन देखें

जब आप बड़ी मात्रा में टेक्स्ट के साथ काम कर रहे हैं तो प्रभाव अधिक ध्यान देने योग्य है Semalt्ट, उपरोक्त उदाहरण आपको इस संपत्ति की उपयोगिता का एक विचार देने के लिए पर्याप्त होना चाहिए. संस्करण 43 और 30 से शुरू करते हुए, क्रोम और ओपेरा इस प्रॉपर्टी को "प्रायोगिक वेब प्लेटफ़ॉर्म फीचर्स" ध्वज के पीछे का समर्थन करता है जिसे क्रोम: // फ्लैग में सक्षम किया जा सकता है। किनारे और सफारी फ़ॉन्ट-आकार-समायोजित संपत्ति का समर्थन नहीं करते हैं।

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

निष्कर्ष

ट्यूटोरियल को पढ़ने के बाद, अब आप जानते हैं कि फ़ॉन्ट-आकार-समायोजित संपत्ति क्या करती है, यह महत्वपूर्ण क्यों है, और विभिन्न फ़ॉन्टों के पहलू मान को कैसे काम करें।

क्योंकि फ़ॉन्ट-आकार-समायोजित पुराने ब्राउज़रों में बेहद खराब हो जाता है, तो आप आगे बढ़ सकते हैं और उत्पादन वेबसाइटों में पाठ की स्पष्टता को बेहतर बनाने के लिए आज इसका उपयोग करना शुरू कर सकते हैं।

क्या आप कुछ अन्य उपकरण या युक्तियां जानते हैं जो उपयोगकर्ताओं को फ़ॉन्ट के पहलू मानों की गणना करने में मदद कर सकते हैं? टिप्पणी में साथी पाठकों को बताएं

March 1, 2018