Googleフォントを使用するウェブサイトを開発していますOpen Sans
そのようです:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,800italic,800,700' rel='stylesheet' type='text/css'>
通常、私のウェブサイトで作業するときにChromeを使用しますが、今日はWindows 10でIE 11(11.0.10240.16431)でどのように見えるかを確認することにしました。残念ながら、Open Sans
が適切にロードおよびレンダリングされていません。 Developer Toolsコンソールでこれらのエラーの多くを見ます:
CSS3111: @font-face encountered unknown error.
PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff
奇妙だと思って-以前にIE 10 - https://www.google.com/fonts 。その他CSS3111
エラー。すべてのカスタムフォントがserif
に表示されます:
Google FontsはIE 11?で壊れていますか?フォントはEdge、Chrome、Firefoxなどで正しく読み込まれます。IEでこれらのフォントを動作させる方法がわかりません。
更新1
IE 11でエミュレートされたドキュメントモードを8に設定すると、フォントが正しくレンダリングされます。IE 9+でも同じ問題が発生します。 Googleによる不正なユーザーエージェント文字列処理の可能性はありますか?
更新2
FontSquirrel に行き、Open Sansをすべての形式でダウンロードしました。 Zipで提供されているCSSもインポートしました。残念ながら、IEそして現在、Firefoxはフォントが使用できないことを報告し続けています。Firefoxはdownloadable font: not usable by platform
。
UPDATE 3
IEのFont download設定がすべてのセキュリティゾーンでEnabledに設定されていることを確認しました。
私にとって、この問題はUntrusted Font Blockingと呼ばれるWindows 10の機能が原因でした。私のオフィスネットワークでは、グループポリシー設定でこれを有効にしました。
この機能を使用すると、ユーザーがグラフィックデバイスインターフェイス(GDI)によって処理される信頼できないフォントを読み込むのを防ぐグローバル設定を有効にできます。信頼できないフォントとは、%windir%/ Fontsディレクトリの外部にインストールされているフォントです。 https://support.Microsoft.com/en-us/kb/3053676
グループポリシーを使用して信頼できないフォントブロックを無効にするには:
レジストリエディターを使用して信頼できないフォントブロックを無効にするには:
重要:変更を有効にするにはコンピューターの再起動が必要です
奇妙なことに、解決策はWindowsファイアウォールを有効にすることです。ファイアウォールをオフにすると、システムにTTFフォントを追加することさえできなくなり、これは@font-face
と同じ問題です。私はここでその解決策を見つけました: https://superuser.com/questions/957907/unable-to-install-fonts-on-windows-1
フォントのブロックについて心配する必要はありません。フォントをbase64に変換し、CSSを介して組み込みます。この方法で、ブラウザコードを介してフォントをプッシュすると、フォントファイルは通常の方法でダウンロードされません。 これはDISA STIGの問題でもあります ダウンロード可能なフォントを無効にします。 解決策はこの投稿で見ることができます また、ここにコピーされています:
必要なのは、フォントをBase64にして、CSSファイルに含めるだけです。新しいFontAwesomeB64.cssへの呼び出しを含めたら、ダウンロード可能なWOFFファイルへの呼び出しを削除してください。
https://www.base64encode.org/ を使用して、WOFF Font-Awesomeフォントファイルをエンコードします。
結果のファイルを編集し、これらの行を追加します。 src:url行に到達したら、受け取ったbase64情報を実行してください(ここに示す大なり記号と小なり記号は使用しないでください)。base64情報の最後に単一引用符を追加します。 、括弧、セミコロン、および終了する中括弧:
@font-face {
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}
これで、ブラウザのすべてのフォントダウンロード拒否設定をバイパスするFont-Awesomeフォントのbase64 CSSファイルが作成されました。
これはすべてのフォントで機能することがわかりました。ダウンロード時は少し重くなりますが、機能を保証する価値があります。
多くのWindows 10/IE 11マシンにこの問題があります(つまり、Webフォントが機能せず、デバッグコンソールでCSS3111エラーが発生します)。いずれの場合も、ファイアウォールはすでにオンになっています(そしてグループポリシーによって管理されています)。
レジストリHKLM\SYSTEM\CurrentControlSet\Services\SharedAccess\Parameters\FirewallPolicy\DomainProfile\EnableFirewall = 0でファイアウォールを無効にしてから再起動し、1に戻し、再起動すると問題が解決することがわかりました。
問題を常に修正するもう1つのことは、Windowsの機能で「Internet Explorer」の選択を解除し、再起動してから、「Internet Explorer」を再選択して再起動することです。
私の推測では、これはある種の内部Windowsファイアウォールのバグであり、上記のアクションの両方がファイアウォールサービスをトリガーして、ある種の内部破損をクリーンアップします。
Windows 10には、フォントブロックの3つのレベルがあります。
機能させるには、すべてを有効にする必要があります。