14

EDIT 23-06-2012 10:24 (CET)：答えを見つけた

一番下の答えを見てください。それが私にとって問題を解決したものです。IE9は現在正しい方法でレンダリングしています。IE8のフォントは少し異なります。どのフォントかはわかりませんが、「OK」に見えます。

Original Question:

私はこれに数時間苦労しています。お客様の1人のために、Webショップを設計し、通常の安全でないhttp接続を介してこれを開発しています。2日前から、ドメインにSSL証明書をインストールし、ウェブサイトとのすべての接続で.htaccessを使用してhttpsドメインを経由するように強制しました。

しかし、何らかの理由で、IE（バージョンなし）は@Font-Faceを使用してCSSで指定したフォントをレンダリングします。フォントに使用しているコードは次のとおりです。

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot');
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

ご覧のとおり、httpsを含むフォントへの完全なリンクを使用しています。SSL証明書ドメインと一致するようにファイルをドメインのルートに移動しようとしました。また、CSS内から相対パスを使用しようとしましたが、これも機能しませんでした。

すべてのフォントはドメイン上にあり、クロスドメインではありません。

私はここで同様の問題を説明しているSOに関する他の2つの投稿に出くわしました。一方は解決されなかった、もう一方は解決されましたが、同じ問題ではなかったようです。この場合、質問の作成者は、Access-Control-Allow-Originヘッダーをwoff / ttf / otf/svgのファイル要求に追加する必要がありました。念のため、これらのヘッダーも.htaccessに追加しました。

<FilesMatch "\.(woff|ttf|otf|svg)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

私はオプションと考えが不足しているようなものです。私はserver-configuration-type-of-guyではありませんが、PHP / MySQL / jQueryに興味があるので、ここSOの他の人と比べて私の考えはかなり限られていると思います。

誰かが試す価値のあるオプションを持っているなら、私に知らせてください！

UPDATE 22-06-2012：

httpsをhttpに変更してIEでページを更新すると、セキュリティで保護されていないコンテンツがあるというメッセージが表示され、このコンテンツを受け入れるオプションがあります。「はい」を選択すると、コンテンツが読み込まれ、フォントが使用可能になります。イェーイ..しかし..httpsに戻すと、フォントが再び消えます。

これから何が学べるかわかりませんが（笑）、ちょっとしたアイデアになるかもしれません。

UPDATE 22-06-2012 #2：

これまで私は試しました：

url（'// protocol / relative / font.eot'）; url（'../file/relative/font.eot'）; url（'/domain/relative/font.eot'）; url（'https://www.secure.tld/font.eot'）; url（'http://www.normal.tld/font.eot'）; （動作しますが、「IEに安全でないアイテムが含まれています」というポップアップが表示されます）

また、FilesMatch（woff、ttf、otf、eot、svg）をhttp：//接続に強制するリライターを作成しようとしました。それは私が思ったようには機能しませんでした、そして私はそれが何かをしたかどうかの手がかりを持っていません..

私もこれを追加しました：

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz

フォント（もちろん.htaccessファイル内）とメインの.htaccessファイルを含むフォルダーへ。

htpasswdログインを削除しようとしたことに加えて、それは大げさな推測でしたが、何も変更しませんでした。

UPDATE 23-06-2012：

DirectAdminサーバーのログを確認しました。IEがフォントを要求しているようです（疑問符が付いたeotファイルが表示されます。これは、iefixとwoffが要求されているeotだと思います）。要求されたものはすべて、200 OKヘッダー応答も受け取りますが、これは私にとって物事をより明確にするものではありません。

まだこの問題を引き起こす可能性のあるものを探して探しています。

また、「F12コンソールログ」に基づいています-IEのことです。フォントが-https経由で-200OK応答で要求されていることがはっきりとわかります。奇妙なことに、使用している4つのフォントのうち3つしか表示されませんが、メインページで4番目のフォントが使用されていない可能性があります。

4

6 に答える 6

8

私はIEとhttpsでまったく同じ動作をしました。IE は 4 つのフォントのうち 3 つを読み込もうとしましたが、サーバーがリソースを配信するとすぐに IE は中断し、次のフォントに移動しました。最後に、フォントが読み込まれず、サイトが安っぽく見えました。私の場合、http ヘッダー「pragma=no-cache」が IE を混乱させたものでした。応答から削除した後、すべてがスムーズに機能しました。Wildfly と Undertow のトリックを説明している私のブログ エントリも参照してください。

アップデート：

その間、Microsoft Connect でバグを開きました: https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma -キャッシュなし

問題を修正してほしい場合は、バグに投票してください。

于 2014-10-04T15:34:38.680 に答える
3

だから、私が見る限り、IE、Safara、Firefox、およびChromeで機能する方法を見つけました。

私が試したすべてのことはうまくいかなかったので、フォントを自分の Web サイト、CSS、またはサーバーに「埋め込む」方法を見つけようとしていました。サーバー担当者によると、サーバーにフォントを追加することはオプションではなかったので、Font-Squirrel に戻って、フォントを変換する際に提供されたオプションがあるかどうかを確認することにしました。

フォントを再アップロードして、エクスポート モードを選択しました。設定フィールドの下部のどこかに「Base64 エンコード」と表示されていますが、幸運にもこれが何を意味するかを知っていたので (このオプションを簡単に確認しない人がいると想像できます)、CSS ファイルを base64 埋め込みフォントで生成しました。

これは問題なく動作します。もちろん、これによりCSSファイルが数kb大きくなりました（5kb対129kb）。しかし、現在のインターネット接続では、100kb 余分に大きな利点があるとは思えません。

base64 でエンコードされていない CSS を比較すると、次のようになります。

@font-face {
    font-family: 'ProximaNovaSemibolds';
    src: url('../font-face/proximanova-semibold-webfont.eot');
    src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
         url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Base64 でエンコードされた CSS:

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova-bold-webfont-webfont.eot');
    }

@font-face {
    font-family: 'ProximaNovaBold';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
         url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
于 2012-06-23T08:19:51.747 に答える
2

Apache/2.2.15 の有効な解決策は、.htaccess を追加することです。これにより、https でもフォント ファイルがキャッシュされなくなります。

<FilesMatch "\.(woff)$">
    Header unset Cache-control
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>
于 2016-03-25T18:25:37.960 に答える
1

Google と Typkit によって開発されたWebfont-Loaderを使用して動作させることができます。

多少のオーバーヘッドが追加されますが、フォントの読み込みをより細かく制御できます (フォントがまだ読み込まれていないときにさまざまなスタイルを設定できるクラスなど)。試してみる価値があるかもしれません。独自の css のセットアップは簡単なようです。

于 2012-06-22T14:56:52.170 に答える
0

Vary Request ヘッダーを https に設定しないでください

フォントの読み込みなし

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

ここで同じ答え。

于 2017-09-02T07:11:04.697 に答える