Nội dung CSS WebKit Lỗi Unicode?

Question

Trên một trang, tôi đang sử dụng phông chữ web tùy chỉnh (sử dụng @font-face) cho các biểu tượng. Mỗi ký tự trong tập hợp có giá trị Unicode phù hợp.

Trong các trình duyệt dựa trên WebKit (Chrome, Safari, Android), một trong các hình tượng không được hiển thị. Thay vào đó, glyph mặc định hoặc một viên kim cương có dấu hỏi bên trong nó được hiển thị.

Trong Firefox, Opera và thậm chí cả Internet Explorer, các ký tự đều được hiển thị chính xác.

Ngoại trừ Safari (Windows), sự cố này chỉ xảy ra khi tôi chèn ký tự Unicode qua thuộc tính CSS content. Nếu tôi chèn ký tự trực tiếp vào HTML bằng cách sử dụng character reference, nó sẽ hiển thị chính xác.

Ví dụ, khi các ký tự Unicode được chèn vào như nội dung CSS ...

/* 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> 

... tất cả họ đều cho thấy trong Firefox, Opera và Internet Explorer, nhưng một trong những thứ hai (\ 01F4A1) doesn không hiển thị trong bất kỳ trình duyệt Webkit nào trên Linux, Windows hoặc Android. Thay vào đó, nó cho thấy glyph mặc định (trên các trình duyệt Android) hoặc một viên kim cương có dấu hỏi bên trong nó (Chrome (Windows), Safari (Windows)).

Chèn các nhân vật sử dụng tài liệu tham khảo nhân vật HTML unicode ...

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

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

... hoạt động tốt trong Firefox, Opera và Internet Explorer. Trình duyệt Chrome (Windows) và Android Webkit cũng hiển thị biểu tượng từ tham chiếu ký tự HTML, nhưng Safari (Windows) hiển thị hình tượng mặc định.

Tôi đã ngưng tụ mã gốc sang một trang nhỏ mà tái tạo các vấn đề: http://www.ghodmode.com/testing/unicode-insertion/

Tôi đã vấp vào một lỗi WebKit bất thường, hay tôi làm điều gì sai?

Tôi không có thiết bị iOS hiện tại để kiểm tra tính năng này, vì vậy các nhận xét mô tả hành vi trên iPhone/iPad cũng được hoan nghênh.

Answer 1

Đây là a bug in WebKit chỉ được khắc phục gần đây (vào tháng 4 năm 2012).

Để diễn giải my write-up on escape sequences for CSS identifiers:

Về lý thuyết (theo spec), any character can be escaped based on its Unicode code point (ví dụ cho , U + 1D306 “tetragram cho trung tâm” biểu tượng: \1d306 hoặc \01d306), nhưng older WebKit browsers don’t support this syntax for characters outside the BMP.

Bởi vì lỗi trình duyệt, có một (non-standard) cách để thoát khỏi những nhân vật này, cụ thể là bằng cách phá vỡ chúng trong-16 UTF đơn vị mã (ví dụ \d834\df06), nhưng cú pháp này (chính đáng) không được hỗ trợ trong Gecko + + và Opera 12 ++.

Vì hiện tại đang có no way để thoát non-BMP symbols theo kiểu trình duyệt chéo, tốt nhất bạn chỉ nên sử dụng những ký tự này không bị thoát.

Trong trường hợp của bạn, ký tự U + 1F4A1 là biểu tượng bổ sung (không phải BMP). Tất cả các ký hiệu khác là các ký tự BMP, vì vậy các ký tự đó không bị ảnh hưởng bởi lỗi.

Tôi cũng đã thực hiện a tool to help you with CSS escapes, và nó cảnh báo bạn nếu bạn nhập một ký tự BMP phi: