वेबकिट सीएसएस सामग्री यूनिकोड बग?

Question

एक पृष्ठ पर, मैं आइकन के लिए एक कस्टम वेब फ़ॉन्ट (@font-face का उपयोग कर) का उपयोग कर रहा हूं। सेट में प्रत्येक वर्ण में एक उपयुक्त यूनिकोड मान होता है।

वेबकिट-आधारित ब्राउज़र (क्रोम, सफारी, एंड्रॉइड) में, ग्लिफ में से एक नहीं दिखाया गया है। इसके बजाए, इसके अंदर एक प्रश्न-चिह्न वाला डिफ़ॉल्ट ग्लिफ़ या हीरा दिखाया गया है।

फ़ायरफ़ॉक्स, ओपेरा और यहां तक ​​कि इंटरनेट एक्सप्लोरर में, वर्ण सभी ठीक से प्रस्तुत किए जाते हैं।

सफारी (विंडोज) के अलावा, यह समस्या तब होती है जब मैं content सीएसएस संपत्ति के माध्यम से यूनिकोड वर्ण डालता हूं। यदि मैं character reference का उपयोग कर सीधे HTML में वर्ण डालता हूं, तो यह ठीक से प्रस्तुत करता है।

उदाहरण के लिए, जब यूनिकोड वर्ण सीएसएस सामग्री के रूप में डाला जाता है ...

/* CSS: */ 
span.css_font_icon:before { 
    display: inline; 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
    content: '\002302 \01F4A1 \00270D \002139'; 
} 

<!-- HTML --> 
<span class="css_font_icon"></span> 

... वे फ़ायरफ़ॉक्स, ओपेरा, और इंटरनेट एक्सप्लोरर, लेकिन दूसरा एक (\ 01F4A1) के सभी शो नहीं करता है लिनक्स, विंडोज, या एंड्रॉइड पर किसी भी वेबकिट ब्राउज़र में नहीं दिखाया गया है। इसके बजाए, यह डिफ़ॉल्ट ग्लाइफ (एंड्रॉइड ब्राउज़र पर) या हीरे के अंदर एक प्रश्न-चिह्न (क्रोम (विंडोज), सफारी (विंडोज)) दिखाता है।

एचटीएमएल यूनिकोड चरित्र संदर्भों का उपयोग वर्ण सम्मिलित करना ...

/* CSS: */ 
span.html_font_icon { 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
} 

<!-- HTML: --> 
<span class="html_font_icon">&#x2302;&#x1F4A1;&#x270D;&#x2139;</span> 

... फ़ायरफ़ॉक्स, ओपेरा, और इंटरनेट एक्सप्लोरर में ठीक काम करता है। क्रोम (विंडोज), और एंड्रॉइड वेबकिट ब्राउज़र भी एचटीएमएल चरित्र संदर्भ से प्रतीक दिखाते हैं, लेकिन सफारी (विंडोज) डिफ़ॉल्ट ग्लिफ दिखाता है। http://www.ghodmode.com/testing/unicode-insertion/

मैं एक असामान्य वेबकिट बग में ठोकर खाई है, या मैं कुछ गलत कर रहा हूँ:

मैं एक छोटे से पेज है कि समस्या reproduces में मूल कोड सघन है?

मेरे पास इसका परीक्षण करने के लिए वर्तमान आईओएस डिवाइस नहीं है, इसलिए आईफोन/आईपैड पर व्यवहार का वर्णन करने वाली टिप्पणियों का भी स्वागत है।

Answer 1

यह a bug in WebKit है जो हाल ही में (अप्रैल 2012 में) ठीक हो गया है।

my write-up on escape sequences for CSS identifiers व्याख्या करने के लिए:

सिद्धांत रूप में (कल्पना के अनुसार), any character can be escaped based on its Unicode code point ( के लिए उदाहरण के लिए, U + 1D306 "केंद्र के लिए tetragram" प्रतीक: \1d306 या \01d306), लेकिन older WebKit browsers don’t support this syntax for characters outside the BMP।

क्योंकि ब्राउज़र कीड़े की

, वहाँ एक और (non-standard) जिस तरह से, इन पात्रों से बचने के लिए अर्थात् UTF-16 कोड इकाइयों में उन्हें तोड़ने (जैसे \d834\df06) के द्वारा होता है, लेकिन इस वाक्य रचना (हक) Gecko में समर्थित नहीं है + + और Opera 12 ++।

चूंकि वर्तमान में no way एक क्रॉस-ब्राउज़र फैशन में non-BMP symbols से बचने के लिए है, तो इन वर्णों को अनचाहे का उपयोग करना सबसे अच्छा है।

आपके मामले में, यू + 1 एफ 4 ए 1 चरित्र एक पूरक (गैर-बीएमपी) प्रतीक है। अन्य सभी प्रतीकों बीएमपी पात्र हैं, इसलिए वे बग से प्रभावित नहीं हैं।

मैं भी a tool to help you with CSS escapes कर दिया है, और यह भी चेतावनी देता है कि यदि आप एक गैर बीएमपी चरित्र दर्ज करें: