मैं विभिन्न वेब ब्राउज़रों में उसी तरह से फोंट कैसे प्रस्तुत कर सकता हूं?


11

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

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

जवाबों:


13

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


हाँ, ऐसा लगता है जैसे यह दुर्भाग्यपूर्ण वास्तविकता है। हालांकि ऐसा लगता है कि किसी के लिए यह संभव होना चाहिए कि वह javaScript का एक टुकड़ा लिख ​​सके जो चीजों को सामान्यीकृत करने के लिए थोड़ा और करीब बना देगा।
Zach Lysobey

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

1
यह लेख (और एक ही श्रृंखला में अन्य) बड़े विस्तार से मुद्दों की व्याख्या करता है, क्या आपको उत्सुक होना चाहिए। blog.typekit.com/2010/12/17/…
paulmorriss

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

@Zach - आप कुछ नियोजन और सुनिश्चित करने के लिए स्मार्ट कोडिंग के साथ कई बाधाओं को दूर कर सकते हैं। लेकिन अंत में हमारे पास केवल इतना नियंत्रण हो सकता है। मूल रूप से यदि आप विंडोज पर सफारी जैसे मुद्दों को स्वीकार कर सकते हैं और बाकी के आस-पास आपको अच्छी तरह से कोड करना चाहिए।
जॉन कोंडे

1

वास्तव में आपके सीएसएस में फोंट एम्बेड करने की एक विधि है। यह बेहद आसान है। यह कैसे करें के बारे में अधिक जानकारी के लिए http://randsco.com/index.php/2009/07/04/p680 देखें । इसका नकारात्मक पक्ष यह है कि पुराने ब्राउज़र (पूर्व ei 7 और ff 3 मुझे लगता है ...) इसका समर्थन नहीं करते हैं। लेकिन इन पुराने ब्राउज़रों का उपयोग करने वाले लोगों की संख्या तेजी से कम हो रही है और यह अभी भी वैकल्पिक फोंट निर्दिष्ट करने के लिए संभव है जो काम करेंगे और आमतौर पर अधिकांश पीसी के मामले में होते हैं।

एक और दृष्टिकोण जो मैंने उपयोग नहीं किया है, उसमें फ्लैश का उपयोग करना शामिल है। मुझे इसकी जानकारी नहीं है इसके अलावा मुझे इस बारे में ज्यादा जानकारी नहीं है।


सीएसएस नोट पर केवल उन फोंट का उपयोग करना सुनिश्चित करें जो आप कॉपीराइट का उल्लंघन नहीं करेंगे यदि उस फॉन्ट को किसी अन्य व्यक्ति द्वारा लिया जाता है जब आप सीएसएस विधि का उपयोग करते हैं तो फॉन्ट फ़ाइल उन सभी के लिए उपलब्ध होती है जो आपकी वेबसाइट तक पहुंच सकते हैं।
केनेथ

उस फ़्लैश विधि को sIFR कहा जाता है । यह इसके साथ ही पेशेवरों और विपक्ष है।
जॉन कोंडे

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

1

जैसा कि अन्य लोग पहले ही नोट कर चुके हैं, हमारे पास कुल नियंत्रण नहीं है। लेकिन मुझे लगता है कि यह कुछ चीजों का उल्लेख करने के लायक है, जो मुझे ब्राउज़रों को समान रूप से चीजों को प्रस्तुत करने में मददगार लगता है। दोनों "मूल बातें" पर वापस आ गए हैं जो आप में से कई पहले से ही कर रहे हैं, लेकिन मुझे लगा कि उन्हें ध्यान देने योग्य है क्योंकि आपके द्वारा बनाई गई नींव अक्सर आपको सफलता या असफलता के लिए तैयार करती है ...

सीएसएस रीसेट। अवधारणा सरल है, आप HTML रेंडरिंग के लिए एक सामान्य शुरुआती बिंदु सेट करने के लिए एक स्टाइलशीट में HTML टैग डिफॉल्ट सेट करते हैं। यहाँ एक लेख और उदाहरण है: http://meyerweb.com/eric/tools/css/reset/

सिद्धांत घोषणा। http://htmlhelp.com/tools/validator/doctype.html

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.