मैंने देखा कि क्रोम और सफारी (विंडोज) जैसे वेब-किट ब्राउज़र निकटतम पिक्सेल में एम मानों को गोल करते हैं, जबकि फ़ायरफ़ॉक्स, आईई,? ओपेरा? उप-पिक्सेल मानों का उपयोग कर सकते हैं। यह आम तौर पर एक बड़ा मुद्दा नहीं है, लेकिन जब मैं अलग-अलग क्लाइंट संकल्पों में निरंतर प्रभाव के लिए अक्षर अंतर को सटीक रूप से संरेखित करने के लिए एम का उपयोग करता हूं या टेक्स्ट-छाया का उपयोग करता हूं तो इससे मुझे सिरदर्द होता है। निम्नलिखित परीक्षण मामले में एक नज़र डालें।वेब-किट और उप-पिक्सेल मान, वर्कअराउंड?
आप देखेंगे कि एफएफ में भी छोटे अक्षरों में अभी भी एक छाया है, जबकि क्रोम शून्य मान को शून्य पर गोल करता है और पहले दो अनुच्छेदों में कोई छाया नहीं होती है।
EDIT यह इकाइयों के बारे में नहीं है। यदि आप 0.93, 0.8, 0.7 के साथ 0.03em को प्रतिस्थापित करते हैं .. पीएक्स एफएफ छोटी और छोटी छाया प्रदर्शित करेगा, जबकि जब क्रोम 1px से नीचे चला जाता है तो यह अचानक कुछ भी प्रदर्शित नहीं करता है।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style>
</head>
<body>
<p style="font-size:1em">No Shadow Test</p>
<p style="font-size:1.5em">No Shadow Test</p>
<p style="font-size:2em">Test</p>
<p style="font-size:2.5em">Test</p>
<p style="font-size:3em">Test</p>
<p style="font-size:3.5em">Test</p>
<p style="font-size:4em">Test</p>
<p style="font-size:4.5em">Test</p>
<p style="font-size:5em">Test</p>
</body>
</html>
मैं पिक्सेल-परिपूर्ण डिज़ाइन पर भरोसा नहीं करता। वे उन्हें प्राप्त करने का एकमात्र तरीका एक छवि का उपयोग करना है ... – Blender
मेरा डिज़ाइन सब कुछ है, लेकिन पिक्सेल सही है। मैं कहीं भी पिक्सल का उपयोग नहीं करता हूं। –
'em' वर्तमान फ़ॉन्ट आकार के साथ 'एम' की ऊंचाई पर आधारित है। चूंकि यह पिक्सल पर आधारित है, इसलिए 'em' है। – Blender