मिश्रण-मिश्रण-मोड को लागू करने के बाद मोटा पाठ: अंतर

Question

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

अपना शोध से, मुझे पता चला है कि सबसे अच्छा तरीका इस लक्ष्य को हासिल करने के लिए, mix-blend-mode: difference; उपयोग करने के लिए किया गया था। एकमात्र समस्या यह है कि कुछ अज्ञात कारणों से पाठ बोल्ड हो रहा है।

मूल रूप से मैं डेमो प्रदान करना चाहता था लेकिन mix-blend-mode कोड स्निपेट में काम नहीं कर रहा है। मुझे सच में यकीन नहीं है कि, मैंने अन्य लोगों को डेमो में इसका उपयोग क्यों देखा है, लेकिन मेरे लिए, यह लाल रंग के साथ हाइलाइट किया गया है।

आप देख सकते हैं, लागू करने के बाद mix-blend-mode: difference; पाठ स्पष्ट रूप से मोटी होती है:

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

मुझे पता है कि यह बेवकूफ है लेकिन जब मैं फ़ोटोशॉप में एक ही प्रभाव को फिर से बनाने की कोशिश कर रहा था, तो सब ठीक था, जिसका मतलब है कि difference मिश्रण मोड के साथ रंगों को उलटना सही ढंग से काम करता है।

मेरा प्रश्न है: क्या कोई व्यक्ति बिना किसी शिश्न के मोटे (?) हो सकता है या शायद यह ऐसा काम करने के लिए है और ऐसा कुछ भी नहीं है जो मैं कर सकता हूं?

मैं अलग दिखने के लिए फ़ॉन्ट शैली को light में बदलना नहीं चाहता हूं।

संपादित करें: ठीक है, तो यहां एक त्वरित उदाहरण है - मुझे नहीं पता कि इस बार यह क्यों काम करता था। पिछली बार mix-blend-mode: difference; डेमो में बिल्कुल काम नहीं किया था, इसलिए मैंने अपनी समस्या का वर्णन करने के लिए छवियों का उपयोग किया।

वैसे भी, पर पाठ छोड़ दिया और सही पक्ष अंतर देखने के लिए सक्षम होने के लिएmix-blend-mode: difference; बिना है। अजीब बात यह है कि mix-blend-mode: difference; के बिना सफेद संस्करण ठीक दिखता है - मैंने अभी इसे ब्लैक बीजी पर संस्करण जोड़कर खोजा है।

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.white { 
 
    background-color: #fff; 
 
    width: 50%; 
 
    position: absolute; 
 
    left: 0; 
 
    height: 100%; 
 
} 
 
.black { 
 
    background-color: #000; 
 
    width: 50%; 
 
    position: absolute; 
 
    right: 0; 
 
    height: 100%; 
 
} 
 
.normalb { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 5%; 
 
    color: #000; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
    font-size: 42px; 
 
    transform: translateY(-50%); 
 
    z-index: 10; 
 
} 
 
.normalw { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 5%; 
 
    color: #fff; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
    font-size: 42px; 
 
    transform: translateY(-50%); 
 
    z-index: 10; 
 
} 
 
.difference { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    color: #fff; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: normal; 
 
    font-size: 42px; 
 
    mix-blend-mode: difference; 
 
    z-index: 10; 
 
}

<div class="white"></div> 
 
<div class="black"></div> 
 
<div class="normalb">example</div> 
 
<div class="normalw">example</div> 
 
<div class="difference">example</div>

यहाँ एक स्क्रीनशॉट पर एक त्वरित तुलना नज़दीक से देखने के लिए है:

हममम ... यह एक सफेद पाठ करने के लिए mix-blend-mode: difference; लागू करने के बाद कैसा लग रहा है , इसे काले रंग की तरह सफेद रंग दिया जाता है लेकिन एक सफेद पृष्ठभूमि पर, जो अजीब है क्योंकि फ़ॉन्ट वही रहता है, इसलिए रंगों को उलटकर इसे सफेद पर सामान्य काला जैसा दिखना चाहिए संस्करण लेकिन यह नहीं करता है। मैं उलझन में हूं।

Answer 1

मैंने देखा है कि अक्सर प्रभाव गुणों को लागू करते समय या टेक्स्ट में बदलते समय: आप ब्राउज़र पर दिखाई देने वाले असंगत भारों और क्रोम को कुख्यात रूप से "गोल-मटोल" दिखाई देते हैं।

मैं प्रभावित तत्वों को निम्नलिखित गुणों को लागू करके इस समस्या को हल करने में सक्षम हूं।

div{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }