Giảm các ký tự Unicode cho trình duyệt web với các phông chữ bị thiếu

Question

Tôi đang sử dụng Unicode 'CHECK MARK' (U + 2713) trong tài liệu html. Tôi thấy rằng nó làm cho OK trong hầu hết các trình duyệt, nhưng đôi khi tôi gặp một ai đó với một phông chữ bị thiếu trên máy tính của họ. Có bất kỳ thủ thuật HTML/JS nào để chỉ định ký tự hiển thị thay thế (hoặc hình ảnh) nếu phông chữ bị thiếu không?

Answer 1

Không có cách trực tiếp để biết liệu có bất kỳ ký tự cụ thể nào được hiển thị theo cách hữu ích hay không. Về tất cả những gì bạn có thể làm từ JavaScript là tạo một <span> chứa một (hoặc một vài) ký tự đích trong phông chữ đích và so sánh chiều rộng của nó với một số khác là <span> chứa cùng số ký tự mà bạn biết sẽ không hiển thị một cách hữu ích (*) . Nếu chúng có cùng chiều rộng, rất có thể bạn đã có một tải các hộp hoặc dấu chấm hỏi trong mỗi hộp, vì vậy bạn có thể thực hiện các biện pháp dự phòng như thêm hình ảnh.

Vì đây là khá nhiều phiền toái, bạn có thể thích chỉ cần đi cho hình ảnh. Hoặc bạn có thể thử sử dụng @font-face nhúng trên các trình duyệt hiện đại để sử dụng phông chữ nổi tiếng nói chung. Vì thường là IE có hỗ trợ phông chữ Unicode kém, hãy chắc chắn bao gồm một phông chữ EOT.

(*: bạn có thể thử một ký tự hiện chưa được gán và hy vọng sẽ giữ nguyên cách đó, ví dụ: U + 08FF hoặc ký tự được bảo đảm không hợp lệ như U + FFFF, mặc dù bạn có thể đặt Trong tài liệu HTML.)

Answer 2

Unicode khá chuẩn, tôi luôn sử dụng unicodemap.org. Đây là ký tự bạn sử dụng [link], ký tự này sẽ cung cấp cho bạn tất cả các mã được liên kết với dấu kiểm. Nếu bạn muốn tương thích hoàn toàn ngược, bạn sẽ cần phải sử dụng một hình ảnh thực tế. 1 tập tin hình ảnh cho một dấu kiểm là nhẹ hơn một javascript hack/plugin. Có lẽ là lựa chọn tốt nhất của bạn.

Answer 3

Nếu bạn có thể tìm cách kiểm tra từ xa nếu MS Office 2000 hoặc mới hơn được cài đặt, bạn có thể giả định rằng Arial Unicode MS được cài đặt và do đó có mã điểm này trong một phông chữ (miễn là bạn có họ phông chữ CSS được đặt thành "Arial Unicode MS, Arial, sans-serif").

Tôi tin rằng điều này sẽ chỉ làm việc trong Microsoft Internet Explorer, nhưng bạn sẽ có thể phát hiện một cài đặt Word bằng cách cố gắng để tạo ra đối tượng ActiveX của nó trong JavaScript:

if(new ActiveXObject("Word.Application")) 
{ 
    window.alert("Word is installed, go ahead and use the Unicode check mark in HTML"); 
} 
else 
{ 
    window.alert("Word is not installed, use your image of a check mark."); 
} 

Nhưng cho rằng điều này thực sự chỉ hoạt động trong IE, có lẽ sẽ ném cảnh báo bảo mật trong IE8, và bạn vẫn cần một cơ chế dự phòng cho các trình duyệt khác hoặc trình duyệt IE không có MS Office, sử dụng hình ảnh mọi lúc có lẽ là cách tốt nhất để đi.

Answer 4

Đây không phải là khá gì bạn đang yêu cầu, nhưng nó có thể giải quyết vấn đề của bạn (giả mục tiêu của bạn là để HTML đầu ra mà không có nó cần phải dựa vào hình ảnh bên ngoài, vv)

bạn đã xem xét dữ liệu hình ảnh URL (còn gọi là RFC2397): http://www.ietf.org/rfc/rfc2397.txt

Thay vì sử dụng:

✓ 

để đại diện cho một dấu kiểm tra, bạn sẽ sử dụng:

<img src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsj 
zmpzmj0FADs="/> 

Điều này sẽ không yêu cầu bất kỳ phông chữ Unicode cụ thể nào có ký tự CHECK MARK được cài đặt ở phía máy khách, NHƯNG nó sẽ không hoạt động trong Internet Explorer 7 trở xuống. (Internet Explorer 8, Firefox, Safari, v.v.nên hoạt động tốt)