phát hiện xem tải xuống phông chữ trong IE có được kích hoạt

Question

Có cách nào để phát hiện xem thuộc tính tải xuống phông chữ trong trình khám phá internet bị tắt hay bật không?

Hiện tại nếu tôi triển khai giải pháp phông chữ (phông chữ hoặc con sóc hoặc loại khác) để hiển thị phông chữ, tất cả trình duyệt sẽ phát đẹp ngoại trừ nếu trình duyệt Internet có tùy chọn "Tải xuống phông chữ".

Cài đặt này có thể được tìm thấy trong IE> Tùy chọn Internet> Bảo mật> Mức tùy chỉnh> Tải xuống> Tải xuống phông> Bật/Tắt.

Nếu tôi có thể phát hiện tùy chọn này, tôi có thể quay lại phương thức javascript.

Những giải pháp này không có tác dụng như tùy chọn này không thực sự vô hiệu hóa tính năng này, nó ngăn chặn một download xảy ra:

• http://paulirish.com/2009/font-face-feature-detection/
• http://www.lalit.org/lab/javascript-css-font-detect/

EDIT: tôi nên đề cập đến rằng chúng ta không thể không sử dụng một giải pháp server-side, nó phải là hoàn toàn khách hàng kịch bản bên cạnh.

Answer 1

Vì tính năng này không cho phép tải xuống, giải pháp (thay vì dơ bẩn) sẽ yêu cầu IE tải xuống một phông chữ được gọi là thực sự là một tập lệnh đơn giản trên máy chủ của bạn. một cookie nói "ok anh ấy gots font" và trả về một trang trống. Khi người dùng tải trang tiếp theo, bạn sẽ triển khai máy móc Javascript nếu cookie không có ở đó.

Answer 2

Dựa trên biểu đồ dòng chảy @Zopieux, tôi đã có thể làm cho công việc kịch bản này cho IE6-9 khi font-tải bị vô hiệu hóa, mà trong trường hợp của tôi là cho một khách hàng nơi như mạng nội bộ của công ty khác có điều này đã tắt.

CSS:

@font-face { 
    font-family: 'TestFont'; 
    src: url('/includes/font.php?type=eot'); 
    src: url('/includes/font.php?type=eot#iefix') format('embedded-opentype'), 
    url('/includes/font.php?type=woff') format('woff'), 
    url('/includes/font.php?type=ttf') format('truetype'), 
    url('/includes/font.php?type=svg#UniversLTStd49LtUltraCn') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

PHP, khi src url font-face được yêu cầu, nó kéo kịch bản này, trong đó kiểm tra các loại, thiết lập cookie, và phục vụ webfont của sự lựa chọn. Nếu font-tải được kích hoạt và bạn không định tuyến đến tập tin font chữ, IE sẽ ném lên một lỗi @ font-face:

<?php 
$type = $_REQUEST['type']; 
$location = "Location: /includes/fonts/universltstd-lightultracn-webfont.".$type; 

// create a cookie 
setrawcookie("FontDownloaded", 1, time()+3600*24, '/'); 
header($location); 

?> 

JS, sau đó về phía khách hàng, làm một cái gì đó như thế này để kiểm tra cho cookie, và thực hiện việc thay thế như cufon-yui.js hoặc typeface.js:

$(function() { 
    $('body').append('<span id="TestFont"/>'); 
    $('#TestFont').html('Testing').css({ 
     fontFamily: 'TestFont', 
     opacity: 0 
    }); 

    // find cookie 
    bool = Boolean(getCookie('FontDownloaded')); // use your own cookie method 

    if (!bool) { 
     // implement @font-face fallback   
     Cufon.replace('.items', { fontFamily: 'NewFont' }); 
    } 
    $('#TestFont').remove(); 
}); 

Answer 3

tôi nhận ra câu hỏi này là cũ, nhưng vấn đề này vẫn còn tồn tại đối với một số người sử dụng internet của công ty với an ninh IT nghiêm ngặt. Tôi nhìn vào các giải pháp ở trên và những người khác, nhưng họ không làm việc tốt cho tôi, vì vậy tôi tìm thấy một giải pháp mà không yêu cầu mã phía máy chủ, không có javascript, và không có css. Ma thuật cơ bản của nó, nhưng nó có một số hạn chế.

Giới hạn 1: Điều này sẽ chỉ hoạt động đối với các phông chữ biểu tượng sử dụng các điểm mã số cao để hiển thị hình ảnh. Nó sẽ không hoạt động cho các phông chữ kiểu chữ cho văn bản có thể đọc được.

Giới hạn 2: Bạn phải tìm một biểu tượng UTF-8 chuẩn là một thay thế phù hợp cho biểu tượng tùy chỉnh của bạn.

Ví dụ: nếu bạn có phông chữ tùy chỉnh mà bạn sử dụng để hiển thị biểu tượng ngôi sao, một dự phòng phù hợp cho điều này sẽ là điểm mã unicode 0x2605 ★. Vì vậy, trong mã tạo phông chữ của bạn, bạn sẽ cần phải mã cứng mà codepoint vào lớp css của bạn cho biểu tượng ngôi sao của bạn. Nếu bạn đang sử dụng "grunt-webfont", bạn sẽ làm điều gì đó như thế này trong tập tin grunt của bạn:

webfont: { 
    icons: { 
     options: { 
      codepoints: { 
       'star': 0x2605 
     ... 
}}}} 

Ngôi sao là một ví dụ hoàn hảo; nó có thể là khó khăn để tìm một thay thế UTF8 phù hợp cho các biểu tượng ưa thích của bạn để điều này có thể không làm việc cho tất cả mọi người. Xem xét vấn đề này ảnh hưởng đến một số lượng rất nhỏ người dùng, chúng tôi cảm thấy rằng đây là một giải pháp minh bạch phù hợp không ảnh hưởng đến người dùng thông thường với thêm js/css/cruft cookie.