@fontface बनाम डिफ़ॉल्ट फ़ॉन्ट आकार को कैसे ठीक करें - लेआउट ब्रेक अगर @fontface लोड नहीं होता

Question

यदि कोई साइट 2 कस्टम फोंट लोड करने के लिए @ फ़ोंटफ़ेस का उपयोग कर रही है और डिफ़ॉल्ट/बैकअप फ़ॉन्ट के रूप में एरियल या सैन्स-सेरिफ़ फ़ॉन्ट का भी उपयोग करती है लेकिन दो फोंट आकार में बहुत अलग हैं - यदि आप @Fontface फ़ॉन्ट लोड नहीं करते हैं तो आप लेआउट समस्या को कैसे ठीक करते हैं?

समस्या यह है कि @Fontface फ़ॉन्ट डिफ़ॉल्ट एरियल फ़ॉन्ट की तुलना में कम स्थान लेता है। तो यदि शीर्षक 45px पर आकार दिया गया है और @Fontface फ़ॉन्ट div के भीतर पूरी तरह से लोड हो जाता है। लेकिन अगर @ फ़ोंटफ़ेस फ़ॉन्ट समय में लोड नहीं होता है - डिफ़ॉल्ट फ़ॉन्ट इसके बजाय (45px पर) लोड होता है, और एरियल div में और अधिक कमरे ले रहा है, जिससे शीर्षक 2 लाइनों में टूट जाता है और इस प्रकार लेआउट को तोड़ देता है।

तो हम दोनों @ fontface शैली और डिफ़ॉल्ट शैली को कैसे नियंत्रित कर सकते हैं। आदर्श रूप में, मैं एच 2 @ फोंटफेस शैली को 45 पीएक्स पर रखना चाहता हूं और उसी एच 2 शैली के लिए डिफ़ॉल्ट फ़ॉन्ट को 30 पीएक्स पर लोड करना चाहता हूं।

Answer 1

आप जावास्क्रिप्ट समर्थन पर निर्भर कोई आपत्ति नहीं है, तो आप Modernizr की तरह कुछ अन्य बातों के साथ एक fontface वर्ग html तत्व को अगर @font-face समर्थित है जोड़ना होगा जो, हो सकता है। तो बस अपने सीएसएस rework केवल इसलिए की तरह, बेहतर फ़ॉन्ट का उपयोग करने अगर वर्ग मौजूद है:

h2 { font:30px/1.2 sans-serif; } 
html.fontface h2 { font:45px/1.2 'awesome font', sans-serif; } 

Answer 2

आप http://www.fontsquirrel.com/fontface/generator का उपयोग निश्चित फोंट उत्पन्न करने के लिए कर सकते हैं।

उपयोग विकल्प X-height Matching: और Adjust Glyph Spacing

Answer 3

आप font-size-adjust जो Firefox और Blink powered browsers द्वारा समर्थित है का उपयोग कर सकते हैं।

FOUT से छुटकारा पाने के लिए पूरी तरह से आईडी this method की अनुशंसा करें।

और यदि @font-face समर्थित नहीं है तो आप जावास्क्रिप्ट विकल्पों (जैसे Cufón या Typeface.js) की सेवा के लिए this filter का उपयोग कर सकते हैं।

Answer 4

मैं Google Web Font Loader का उपयोग करने की अनुशंसा करता हूं, यह शरीर तत्व में अतिरिक्त कक्षाएं जोड़ता है जो इंगित करता है कि फ़ॉन्ट है: लोड करना शुरू हुआ, लोडिंग समाप्त हो गया, लोड करने में असमर्थ। इन बॉडी क्लासेस का उपयोग करके आप फ़ॉन्ट शैलियों को उचित रूप से समायोजित कर सकते हैं। उदाहरण के लिए यदि @ फ़ॉन्ट-फेस आपको लोड करने में विफल रहता है, तो आप फ़ॉलबैक फ़ॉन्ट के लिए फ़ॉन्ट परिवार को छोटा सेट कर सकते हैं।

Answer 5

आपको उपयोग में फ़ॉन्ट के वर्तमान वास्तविक आकार को मापने के लिए एक मीट्रिक तत्व का उपयोग करने की आवश्यकता है, एक em < => पिक्सेल अनुपात।

सामान्य विचार यह है कि आपके पास एक अदृश्य तत्व है जो बेस फ़ॉन्ट आकार (<span>&nbsp;</span>) का उपयोग करता है और फिर जावास्क्रिप्ट का उपयोग यह मापने के लिए करता है कि यह पृष्ठ पर कितना (मुख्य रूप से ऊंचाई) लेता है।

वहां से, आप यह निर्धारित कर सकते हैं कि आपको सक्रिय फ़ॉन्ट आकार को बढ़ाने या घटाने की आवश्यकता है ताकि इसे जावास्क्रिप्ट के साथ वांछित डिज़ाइन चश्मा तक स्केल किया जा सके।

पाठ्यक्रम की तकनीक एक आधार आकार सेट और प्रतिशत में सेट की गई सभी चीज़ों पर निर्भर करती है (एला वाईयूआई रीसेट/फ़ॉन्ट्स शैली) अन्यथा, आपको body के लिए शैली नहीं बल्कि सभी चीजों को फिर से लिखना होगा।

रेफ मैंने अपने बुकमार्क्स में पाया: http://www.alistapart.com/articles/fontresizing आईई 7 बार के दौरान लिखा गया है, लेकिन अभी भी ठीक काम करता है।

यह तकनीक भी हल करती है "मैं ज़ूम किए गए टेक्स्ट/बढ़ाए गए फ़ॉन्ट-आकार वाले उपयोगकर्ताओं के लिए क्षतिपूर्ति कैसे करूं, पेज लेआउट तोड़ना नहीं"।

Answer 6

http://www.options4.com/options/standards/metrics.html

पर एक नज़र डालें आप सभी मीट्रिक की आप के लिए उपलब्ध

मैं व्यक्तिगत रूप से point प्रणाली recommand हैं मिलेगा आप एक निश्चित आकार उपयोग करना चाहते हैं (em बहुत बड़ा है और आपकी संख्याएं डरावनी लगती हैं)