1.9 पीएक्स टेक्स्ट आकार 1 पीएक्स के रूप में दिखाया गया - राफेल एसवीजी, सीएसएस, जावास्क्रिप्ट

Question

मेरे पास एक बड़े Raphael कैनवास हैं जो सैकड़ों एसवीजी पर खींचे गए हैं, और ज़ूम इन और आउट करने के लिए "raphael pan and zoom" प्लगइन का उपयोग कर रहा हूं।

इस वजह से, मैं शुरुआत में अपने svgs को बहुत छोटा खींचता हूं, और उपयोगकर्ता बस ज़ूम इन/आउट करता है।

मेरी समस्या यह है कि 2px टेक्स्ट आकार बहुत बड़ा है, और 1px टेक्स्ट आकार बहुत छोटा है, हालांकि जब मैं "1.5px" आज़माता हूं, तो यह फिर से 1px टेक्स्ट आकार के रूप में प्रदर्शित होता है।

... 
this.paper.text(x, y, string) 
      .attr({'font-family':'myFont', 'font-size':'1.5px'}); 
... 

:

मैं मुसीबत फ़ॉन्ट आकार बदल रहा 1.5px, या एक के किसी भी आधे आकार होने के लिए (1.2, 1.6, 1.9 ...)

यहाँ हो रहा है मेरी कोड है

• जब मैं "1px" से "1.9px" से कोई भी संख्या डालता हूं, तो इसे आकार "1px" के रूप में प्रस्तुत किया जाता है।
• जब मैं "2px" डालता हूं तो इसे आकार के रूप में प्रस्तुत किया जाता है "2px"।

'myFont' के लिए सीएसएस है:

@font-face { 
    font-family: 'myFont'; 
    src:url('fonts/myFont.eot'); 
    src:url('fonts/myFont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/myFont.woff') format('woff'), 
     url('fonts/myFont.ttf') format('truetype'), 
     url('fonts/myFont.svg#myFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[data-icon]:before { 
    font-family: 'myFont'; 
    content: attr(data-icon); 
    speak: none; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    /* line-height: 1; */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-home, .icon-zoom-in{ 
    font-family: 'myFont'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    /* line-height: 1; */ 
    -webkit-font-smoothing: antialiased; 
    pointer-events:none; 
} 
.icon-home:before { 
    content: "\e000"; 
} 
.icon-zoom-in:before { 
    content: "\e001"; 
} 

/* Note: Generated from ico-moon, it's just a font that is a bunch of icons. */ 

मैं '0.5' के लिए सेटिंग 'line-height' की कोशिश की है, कोई भाग्य के साथ। कोई विचार?

धन्यवाद!

Answer 1

जब आप पिक्सेल में चौड़ाई को परिभाषित करते हैं तो सभी ब्राउज़र दशमलव स्थानों के लिए समर्थन नहीं करते हैं। क्रोम में दशमलव स्थानों को छोटा कर दिया जाता है और इस प्रकार 5.5 पीएक्स या 5.6 पीएक्स 5 पीएक्स बन जाता है। कुछ ब्राउज़र इसे बिना छेड़छाड़ किए दिखाता है।

चौड़ाई पिक्सल की पूर्णांक संख्या के लिए गोल की जाएगी।

मुझे नहीं पता कि हर ब्राउज़र इसे उसी तरह से गोल करेगा या नहीं। सब-पिक्सेल प्रतिशत गोल करते समय वे सभी एक अलग रणनीति प्रतीत होते हैं। यदि आप विभिन्न ब्राउज़रों में उप-पिक्सेल राउंडिंग के विवरण में रूचि रखते हैं, तो an excellent article on ElastiCSS है।

जब पेज पेंट किया जाता है तब भी संख्या गोल होती है, पूर्ण मान स्मृति में संरक्षित होता है और बाद में बाल गणना के लिए उपयोग किया जाता है। उदाहरण के लिए, यदि आपका बॉक्स 100.499 9 पीएक्स पेंट 100px पर है, तो 50% की चौड़ाई वाली बच्ची की गणना .5 * 100 के बजाय .5 * 100.4999 के रूप में की जाएगी। और इतने गहरे स्तर पर।

more about on this q/a