फ़ॉन्ट-संश्लेषण - सीएसएस-ट्रिक्स

font-systhesisसीएसएस में संपत्ति कैसे फॉन्ट बोल्ड और italicized चरित्र को संभालने के लिए निर्दिष्ट के लिए ब्राउज़र निर्देश देता है font-familyउन्हें शामिल नहीं है।

एक उदाहरण के रूप में, Google फ़ॉन्ट्स से लेटो को लेते हैं। इसमें कहा गया है कि फॉन्ट के 10 अलग-अलग रूप हैं।

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

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

यह font-synthesisअंदर आता है। यह नियंत्रित करता है कि ब्राउज़र को टाइप करने के लिए कौन सी टाइपफेस को अनुमति देता है।

वाक्य - विन्यास

.element ( font-synthesis: none | ( weight || style ); )

सादे अंग्रेजी में, इसका मतलब यह font-synthesisहोगा:

• का एक मूल्य none
• या तो weightयाstyle
• दोनों weightऔरstyle

यह ध्यान देने योग्य है कि font-synthesisएक आशुलिपि संपत्ति माना जाता है। युक्ति के अनुसार, यह एक संयोजन है font-synthesis-weightऔर font-synthesis-styleजहां दोनों मानों को स्वीकार करते हैं autoया none। चूंकि आशुलिपि का उपयोग करके समान प्रभाव प्राप्त करना संभव है, इसलिए यह संभवतः सबसे अच्छा तरीका है।

मूल्यों

• none: न तो बोल्ड और न ही तिरछा संश्लेषित किया जा सकता है
• weight: ब्राउज़र द्वारा बोल्ड को संश्लेषित किया जा सकता है
• style: ओब्लिक को ब्राउज़र द्वारा संश्लेषित किया जा सकता है

font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

प्रयोग

font-synthesis::first-letterऔर ::first-lineछद्म तत्वों सहित सभी तत्वों के साथ उपयोग किया जा सकता है ।

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

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

डेमो

ब्राउज़र का समर्थन

लेखन के समय, caniuse font-synthesisसंपत्ति के लिए 20.21% वैश्विक कवरेज की रिपोर्ट करता है।

डेस्कटॉप

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	नहीं न	34+	नहीं न	9+	नहीं न

मोबाइल

iOS सफारी	ऑपेरा मिनी	Android ब्राउज़र	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स
9+	सब	नहीं न	नहीं न	६ 68

font-synthesisईमेल में उपयोग करना चाहते हैं ? अभियान मॉनिटर की रिपोर्ट है कि यह निम्नलिखित ग्राहकों द्वारा समर्थित है:

• Apple मेल 10+
• मैक के लिए आउटलुक
• AOL Alto iOS ऐप
• iOS मेल 10+
• गौरैया
• जी सूट
• जीमेल लगीं
• Google इनबॉक्स

अधिक जानकारी

• सीएसएस फ़ॉन्ट्स मॉड्यूल स्तर 4 विशिष्टता
• "CSS3 परीक्षण: font-synthesis" एरिक मेयर द्वारा
• क्रिस कॉयर द्वारा "पाठ को कैसे व्यवस्थित करें"