@ Font-Face不會通過https載入IE

EDIT 23-06-2012 10:24 (CET)：找到答案@ Font-Face不會通過https載入IE

請看底部的答案。這是爲我解決了這個問題。 IE9現在正在呈現正確的方式。 IE8有一個略有不同的字體。不知道什麼字體，但它看起來「確定」。

Original Question:

我一直在苦苦掙扎與此數小時。對於我們的一個客戶，我們設計了一個網上商店，並且正在通過一個normale不安全的http連接開發這個網站。自2天前以來，我們在域上安裝了SSL證書，並強制與網站的每個連接都通過https域名進行訪問.htaccess

但是，由於某種原因，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的文章，描述了類似的問題，其中一個沒有解決，另外一個是，但它似乎並不是同一個問題。在這種情況下，問題的作者必須將訪問控制允許源頭添加到woff/ttf/otf/svg的文件請求中。我也將這些頭文件添加到我的.htaccess中，以確保：

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

我有點用盡選項和儘管。我不是服務器配置類型的人，但更多的是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中包含非安全項目）

我也嘗試創建一個rewriterule強制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

向含有字體（在ofcourse一個.htaccess文件）的文件夾藏漢作爲主.htaccess文件。

此外，我試圖刪除htpasswd登錄，這是一個瘋狂的猜測，但也沒有改變一件事。

UPDATE 23-06-2012：

經過該管理嚮導服務器日誌..顯然IE請求的字體（我看到一個EOT文件與問號，我猜這是被請求iefix和WOFF的EOT）。真實要求，一切也越來越200 OK標頭響應，這不是刁難我更加清楚..

還在尋找，尋找什麼可能導致這個問題..

此外，基於「 F12控制檯日誌「 - 在IE中很好。我可以清楚地看到字體正在被請求 - 在https上 - 有200 OK響應。奇怪的是，我只看到了我使用的4種字體中的3種，但可能第4種並未在主頁上使用。

來源

2012-06-21 Joshua - Pendo

我想不出任何特定的東西，但是您是否嘗試過沒有域或URL [協議相對URL]（http://paulirish.com/2010/the-protocol-relative-url/）的URL？ – RoToRa

還沒有嘗試協議相關的URL，將嘗試。沒有域或相對於CSS的URL會被嘗試並且不能正常工作 –

您是否可以找出正在加載的文件，例如Fiddler？ – RoToRa

所以，我只是想出了一種可以在IE，Safara，Firefox和Chrome上工作的方式。

因爲所有我試過沒有工作的事，我試圖找到可能「嵌入」的字體eitherway到我的網站，我的CSS或到我的服務器的方式。根據我的服務器人員添加字體到我的服務器是不是一個選項，所以我決定回到字體松鼠，看看他們提供的選項，在轉換字體。

我reuploaded我的字體恩選擇了出口模式。在設置字段底部的某個地方，它說「Base64 Encode」，幸運的是我知道這意味着什麼（我可以想象有人不會輕易查看此選項），因此我使用base64嵌入字體生成了我的CSS文件。

這工作完美無瑕。當然，這使得我的CSS文件更大一些（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-23 08:19:51

使用'應用程序/ font-woff'，或者你會得到[資源解釋爲字體，但與MIME類型應用程序/ x- font-woff]（http://stackoverflow.com/questions/16704967/resource-interpreted-as-font-but-transferred-with-mime-type-application-x-font-w）警告。 –

你可以得到它使用Webfont-Loader，由谷歌開發，Typkit工作：

它增加一些開銷，但給你也更多地控制字體加載（如類，允許您設置不同的風格，而字體尚未加載）。也許值得一試，setup for your own css seems to be simple。

來源

2012-06-22 14:56:52 Dominik

由於字體不會加載使用我自己的CSS我懷疑他們使用webfont加載器加載。但是，在normale CSS中，我也可以設置備份字體..無論如何，我會仔細研究一下，你永遠不會知道。謝謝 –

太糟糕了，沒有工作:(IE仍然是一個小b *時間:( –

我正好與IE和HTTPS相同的行爲。 IE嘗試加載4種字體中的3種，但只要服務器交付了資源，IE就分手並移動到下一個字體。最後沒有加載字體，網站看起來很糟糕。在我的情況下，http頭「pragma = no-cache」是讓IE困惑的東西。將其從響應中刪除後，一切順利進行。另請參見我的博客文章，其解釋與招Wildfly和暗潮：Blog

UPDATE：

在我開了一個錯誤，在Microsoft Connect上的同時：https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache

如果你希望他們來解決這個問題，請爲這個bug投票。

來源

2014-10-04 15:34:38 romixch

絕對有同樣的問題。

HTTPS，no-cache標題

在被分開施用某些結構域，這不是一個容易問題：IE的組合（在我們的情況下，版本11 /三叉戟7）當所有條件滿足發生錯誤解決方法

來源

2015-07-25 02:31:49 echen

一種可能的方式解決這個問題的辦法是從CDN服務字體文件 – echen

謝謝你！我爲這個問題丟了很多時間。你省去了我的時間！修復，我在.htaccess中配置爲標題集Cache-Control「max -age = 604800，public「 Header set Pragma」「 –

是的，我可以通過使用nginx代理來隱藏spring-boot生成的pragma和cache-control頭，以防止在br中緩存owser：[link]（http://stackoverflow.com/a/43093451/1767316） – user1767316

對Apache/2.2.15工作的解決方案是即使是HTTPS

添加的.htaccess 它會阻止緩存的字體文件

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

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

來源

2016-03-25 18:25:37 Ar2r

[鏈接]（使用nginx）：隱藏Cache-control和Pragma：no-cache – user1767316

不要設置因人而異請求頭到https

沒有字體加載

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

相同的答案here。

來源

2017-09-02 07:11:04

@ Font-Face不會通過https載入IE

回答

相關問題