2011-11-01 21 views
11

Internet Explorerのフォントダウンロードプロパティが無効になっているかどうかを検出する方法はありますか?私は、フォントレンダリングのための@フォントフェースソリューション(フォント・リスやtypekitまたはその他)を実装した場合、インターネットエクスプローラが無効になって「フォントのダウンロード」オプションを持っている場合IEでのフォントダウンロードが有効になっているかどうかを検出する

現在、すべてのブラウザは以外素敵を再生します。

この設定は、IE>インターネットオプション>セキュリティ>カスタムレベル>ダウンロード>フォントダウンロード>有効/無効で確認できます。

このオプションが検出された場合は、javascriptメソッドにフォールバックする可能性があります。

このオプションは、実際に機能を無効にしないように、これらのソリューションが動作しない、それが起こるのダウンロードを防ぐ:

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

編集:私たちは、サーバー側のソリューションを使用しないことができない、それは純粋にクライアントでなければならないことを言及する必要がありますサイドスクリプト。

答えて

6

ダウンロードが発生しないようにするために、(むしろ汚い)解決策は、IEに、実際にはあなたのサーバ上の単純なスクリプトであるいわゆるフォントをダウンロードすることです。 「ok彼はフォントをつかんだ」というクッキーを返し、空白のページを返します。ユーザーが次のページを読み込むと、Cookieが存在しない場合はJavascriptのマシンをデプロイします。

enter image description here

+0

これは私の最初のアイデアでしたが、この特定のプロジェクトにはサーバー側のスクリプトは使用できません。いずれにしても、@ font-faceのようにフォントのダウンロードをどのようにシミュレートしますか?現時点では、フォント自体をajaxで取得しようとしていますが、フォントのダウンロードが無効になっても、それは正常に取得され、ダウンロードされます。 – Scorpius

+1

JSを使用してダウンロードすることは、明らかに何でも可能です。あなたは説明したスクリプトにつながる@ font-faceを置いてフォントをダウンロードするようIEに依頼する必要があるので、ブラウザがそれをダウンロードするかどうかを見ることができます。あなたがサーバー上で何もできないのなら、あなたはうんざりしていると思います。 – zopieux

4

@Zopieuxのフローチャートに基づいて、私は私の場合のような他の企業のイントラネットがこれを持っているクライアントのためにあった、フォントのダウンロードが無効になっているときIE6-9ため、このスクリプトを動作させることができました設定が無効です。

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、フォントフェイスのsrc URLが要求されたとき、それは、このスクリプトを引っ張るには、クッキーを設定し、選択肢のwebfontを提供しています。

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

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

?> 

JSは、クライアント側では、チェックするためにこのような何かを:フォントダウンロードが有効になっていると、あなたは再ルーティングをしていないフォントファイルにした場合、IEがする@ font-faceエラーをスローしますクッキーのために、とcufon-yui.jsまたは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(); 
}); 
4

私はこの質問が古い実現が、この問題は、依然として厳しいITセキュリティといくつかの企業のインターネットユーザーのために存在します。私は上記のソリューションと他のソリューションを調べましたが、うまく動作しませんでした。そのため、サーバーサイドコード、JavaScript、およびCSSが不要な別のソリューションが見つかりました。本質的に魔法ですが、いくつかの制限があります。

制限事項1:これは、数字コードポイントを使用して画像を表示するアイコンフォントでのみ機能します。読みやすいテキストの書体フォントでは機能しません。

制限2:カスタムアイコンに適した標準のUTF-8シンボルを見つける必要があります。

たとえば、スターシンボルを表示するために使用するカスタムフォントを使用している場合、これに適したフォールバックはUnicodeコードポイント0x2605★になります。だから、あなたのフォント生成コードでは、あなたの星のアイコンのcssクラスにそのコードポイントをハードコードする必要があります。あなたがあなたのうなり声ファイルにこのような何かをするだろう「作男-webfont」を使用していた場合:

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

スターは完璧な例です。あなたの空想的なアイコンのための適切なUTF8の置き換えを見つけるのは難しいかもしれないので、これは誰にとってもうまくいかないかもしれません。この問題が非常に少数のユーザーに影響することを考慮すると、これは、余分なjs/css/cookie cruftを持つ正規のユーザーに影響を与えない適切な透過的なソリューションだと感じました。

関連する問題