स्क्रीन रिज़ॉल्यूशन और मॉनीटर आकार से स्वतंत्र फ़ॉन्ट आकार कैसे बनाएं?

Question

मैं एक ऐसे एप्लिकेशन पर काम कर रहा हूं जिसमें मैं फ़ॉन्ट आकार बनाना चाहता हूं जो स्क्रीन रिज़ॉल्यूशन और स्क्रीन आकार से स्वतंत्र है। फ़ॉन्ट का आकार सभी संकल्पों और सभी स्क्रीन आकारों में समान होना चाहिए। जावास्क्रिप्ट और सीएसएस के साथ इसे कैसे करें?

मुझे लगता है कि पिक्सल प्रति बिंदु हार्डवेयर से संबंधित चीज है इसलिए मुझे यकीन नहीं है कि जावास्क्रिप्ट और सीएसएस के पास इसका उपयोग है।

मैंने कई विकल्पों की कोशिश की लेकिन सटीक समाधान नहीं मिला।

Answer 1

कोई अच्छा, सार्वभौमिक समाधान है:

body { 
    font-size: 12pt; 
} 
h1 { 
    font-size: 2em; 
} 
p { 
    font-size: 1.1em; 
} 

Answer 2

पुराने फैशन points काम करना चाहिए।

उदाहरण:

<style> 
p 
{ 
    font:15pt; 
} 
</style> 

Answer 3

html {font-size: 14px /* in example */} 

इस एचटीएमएल के हर भाई तत्व एक सापेक्ष आकार, जो

body { font-size: 100% } /* is 14px now */ 

रूप में अच्छी तरह

div { font-size: 1em } /* should be 14px also */ 

इसकी भी संभव करने के लिए इसका मतलब है देता है जावास्क्रिप्ट के साथ एचटीएमएल फ़ॉन्ट आकार बदलें, और ए सापेक्ष आकार अपेक्षित के रूप में काम करना चाहिए। jQuery के साथ आप शरीर के फ़ॉन्ट आकार का उपयोग कर सकते हैं और स्क्रीनसाइज से गणना की गई कुछ आकार में सेट कर सकते हैं। यहां तक ​​कि विभिन्न उपकरणों में किसी भी प्रकार के आवेदन के लिए @media() { your css here } नियम भी काम करेंगे।

var fontsize=14+'px'; 
jQuery('body').css('font-size',fontsize); 

Answer 4

आप ऐसा नहीं कर सकते क्योंकि आप वाकई क्या उन पर नजर रखने के के सही आकार, जब तक कि आप कंप्यूटर के नियंत्रण इस्तेमाल किया जा रहा है नहीं हो सकता।

उपयोगकर्ता के लिए एक बार में 2 मॉनीटर जुड़े हुए हैं और सेट किया जा सकता है ताकि स्क्रीन के समान तत्व प्रत्येक पर अलग-अलग आकारों पर दिखाई दें।

Answer 5

आप अंक (pt) का उपयोग कर सकते हैं, जो एक इंच के 1/72 पर आधारित हैं। यह एक इकाई है जो पारंपरिक रूप से प्रिंटिंग से आता है। अब, यह इस बात पर निर्भर करता है कि डिवाइस ठीक से कॉन्फ़िगर किया गया है या नहीं, यह आकार मॉनीटर से मॉनीटर तक समान होगा या नहीं। यह अक्सर नहीं होता है, लेकिन कुछ डिवाइस उनके भौतिक स्क्रीन आकार से अवगत हैं। आप इंच in, सेंटीमीटर cm, और मिलीमीटर mm का उपयोग भी कर सकते हैं।

ems के साथ संयोजन में इस आकार का उपयोग करें, जो सापेक्ष आकार हैं। इस तरह, पूरी साइट आवश्यकतानुसार ऊपर और नीचे स्केल कर सकती है।

<span style="font-size: 2cm;">i am big</span> 
<span style="font-size: 2mm;">i am tiny</span> 

Answer 6

आप सेमी और मिमी इस्तेमाल कर सकते हैं। मेरी राय में, आपको बस यह मानना ​​चाहिए कि यह संभव नहीं है। This article हाल ही में प्रकाशित किया गया था, और उस समस्या के लिए एक (दीर्घकालिक) समाधान का सुझाव देता है। यह दीर्घकालिक है क्योंकि यह काम करने के लिए कई खिलाड़ियों (हार्डवेयर और सॉफ्टवेयर निर्माताओं) पर निर्भर करता है।

लेखक के शब्दों में:

यह हास्यास्पद है कि हम मंगल ग्रह के लिए रोबोट को भेज सकते हैं अभी तक यह अभी भी एक वेब पेज पर एक ग्लिफ़ प्रस्तुत करना और विश्वास के साथ कहने के लिए लगभग असंभव है: "आप पर इस ग्लिफ़ मापने यदि आपका एक शासक के साथ स्क्रीन, यह वास्तव में 10 मिलीमीटर चौड़ा होगा। "

Answer 7

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

body { font-size: 16px; } 
@media screen and (min-width: 600px) { 
    body { font-size: 112.5%; } 
} 
@media screen and (min-width: 800px) { 
    body { font-size: 125%; } 
} 
@media screen and (min-width: 1000px) { 
    body { font-size: 137.5%; } 
} 
@media screen and (min-width: 1200px) { 
    body { font-size: 150%; } 
} 

ये केवल उदाहरण मान हैं - आपको विभिन्न आकारों पर अपने ऐप के साथ प्रयोग करना होगा और देखें कि सबसे अच्छा क्या दिखता है। Trent Walton's साइट इसका एक अच्छा उदाहरण है - अपनी ब्राउज़र विंडो का आकार बदलें और देखें कि टेक्स्ट आकार का क्या होता है।

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