Có cách nào để ẩn văn bản nếu phông chữ không khả dụng không?

Question

Tôi muốn viết mã giảm độ duyên dáng sử dụng hình tượng Webdings. Giả sử Webdings là một trong những phông chữ đó là universally available across platforms, nhưng tôi không muốn trình duyệt hiển thị ký tự trong phông chữ mặc định của nó nếu vì một số lý do lạ mà Webdings không có ở đó.

Có cách nào để thực hiện việc này không?

Answer 1

Như tôi đã nói trong một nhận xét:

Thay vì đó, bạn nên sử dụng @font-face để nhúng phông dự phòng. Tốt hơn nhiều so với ẩn văn bản và hoạt động trong "tất cả các trình duyệt ".

Tôi thích sử dụng Font Squirrel Generator để xử lý @font-face. Nó làm cho nó rất, rất dễ dàng.

Answer 2

Chỉ Flash cho phép bạn phát hiện phông chữ nào được cài đặt trên máy tính. Có một bài đăng trên blog để hiển thị cách lấy danh sách phông chữ trong Flash và chuyển danh sách này tới JavaScript. Một khi bạn có nó trong JavaScript, nó phải là dễ dàng để ẩn/hiển thị các văn bản:

http://rel.me/2008/06/26/font-detection-with-javascript-and-flash/

Answer 3

Bạn có thể làm một cái gì đó như thế này với jQuery:

$('p').each(function(){ 
    var s = $(this).css('font-family'); 
    if(s != "verdana"){ 
     $(this).hide(); 
    }  
}); 

Ví dụ: http://jsfiddle.net/jasongennaro/GXjvK/

Vì vậy, bạn kiểm tra để xem phông chữ cho phần tử. Nếu nó không ở đó, bạn giấu nó đi.

Answer 4

Không có cách nào có nguồn gốc để kiểm tra tính khả dụng của phông chữ trong JavaScript.

Tuy nhiên, vì lalit đã nhận ra, vì "mỗi ký tự xuất hiện khác nhau trong phông chữ khác nhau, phông chữ khác nhau sẽ có chiều rộng và chiều cao khác nhau cho cùng một chuỗi ký tự cùng kích thước phông chữ".

Ông đã viết lên một bài viết tốt đẹp, và tạo ra một mảnh phong nha mã để làm việc đó: http://www.lalit.org/lab/javascript-css-font-detect/

Answer 5

Bạn có thể sử dụng một tài sản CSS3 để có phông chữ trên trang web của bạn có nghĩa là tất cả mọi người có một CSS3 tương thích trình duyệt web sẽ thấy "văn bản" như bạn muốn.

@font-face { 
font-family: myFirstFont; /* in your case webdings */ 
src: url('Sansation_Light.ttf'), 
url('Sansation_Light.eot') format("opentype"); /* IE */ 
} 

mối bận tâm duy nhất của tôi bây giờ sẽ là về quyền tác giả, tôi không biết nếu bạn đang cho là có quyền trên phông chữ này để có thể sử dụng nó theo cách này ...