CSS @font-face EOT 未通过 HTTPS 加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7748140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face EOT not loading over HTTPS
提问by Greg
Summary
概括
I'm running into an issue using @font-face over HTTPS in IE 7,8,9 - it simply is not loading. It does not matter whether the containing HTML page is hosted on HTTPS or not, when I try to load the EOT font over HTTP it works, HTTPS it doesn't. Has anyone seen this behavior?
我在 IE 7,8,9 中通过 HTTPS 使用 @font-face 时遇到了一个问题 - 它根本没有加载。包含的 HTML 页面是否托管在 HTTPS 上并不重要，当我尝试通过 HTTP 加载 EOT 字体时，它可以工作，而 HTTPS 则不行。有没有人见过这种行为？
The server hosting the font is sending the proper content-type="application/vnd.ms-fontobject"
托管字体的服务器正在发送正确的 content-type="application/vnd.ms-fontobject"
I've tried multiple fonts, so it's not specific to the font.
我尝试了多种字体，所以它不是特定于字体的。
The fonts were generated over at Font Squirrel
字体是在Font Squirrel生成的
CSS Syntax
CSS 语法
@font-face {
font-family: 'GothamCondensedBold';
src:url('path/to/fontgothmbcd-webfont.eot');
src:url('path/to/fontgothmbcd-webfont.eot?#iefix') format('embedded-opentype'),
url('path/to/fontgothmbcd-webfont.woff') format('woff'),
url('path/to/fontgothmbcd-webfont.ttf') format('truetype'),
url('path/to/fontgothmbcd-webfont.svg#GothamCondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}
Sample Page
示例页面
采纳答案by Chris Haas
I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the varyheader that was messing things up. Unsetting that header for those file types fixed our issue right away.
我知道这是一个旧线程，但我只需要权衡一下。我们在所有版本的 Internet Explorer (7-11) 中的 EOT 和 WOFF 字体都存在相同的问题，但不能通过 HTTPS 加载。经过数小时的反复试验并将我们的标头与其他工作站点进行比较，我们发现是vary标头将事情搞砸了。取消设置这些文件类型的标头立即解决了我们的问题。
<FilesMatch "\.(woff)$">
Header unset Vary
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Vary
</FilesMatch>
Bonus Reading
奖励阅读
- Eric Lawrence: Vary with Care(archive)
- IE Blog: Caching Improvements in Internet Explorer 9(archive)
- 埃里克·劳伦斯：随心而变（存档）
- IE 博客：Internet Explorer 9 中的缓存改进（存档）
回答by tjdett
I ran into this problem with HTTPS, but not HTTP. For some reason IE would continue through the different font options, ignoring 200 OKresponses.
我在使用 HTTPS 时遇到了这个问题，但没有使用 HTTP。出于某种原因，IE 会继续使用不同的字体选项，而忽略200 OK响应。
In my case, the problem was the HTTP header Cache-Control: no-cachefor the font. While this will work fine with HTTP, over HTTPS it causes Internet Explorer to ignore the downloaded font.
就我而言，问题在于Cache-Control: no-cache字体的 HTTP 标头。虽然这对 HTTP 工作正常，但通过 HTTPS 会导致 Internet Explorer 忽略下载的字体。
My best guess is that it's a variation of this behaviour:
我最好的猜测是它是这种行为的一种变体：
KB 815313 - Prevent caching when you download active documents over SSL(archive)
So, if you're seeing IE work through each font in the Developer Tools network view, it might be worth checking if you have a Cache-Controlheader and removing it.
因此，如果您在 Developer Tools 网络视图中看到 IE 处理每种字体，则可能值得检查您是否有Cache-Control标题并将其删除。
回答by Som Nath Upadhyay
This usually happens due to following response headers while downloading the .woff or .eot files.
这通常是由于在下载 .woff 或 .eot 文件时遵循响应标头而发生的。
- Cache-Control = no-cache, no-store, max-age=0, must-revalidate
- Pragma = no-cache
- 缓存控制 = 无缓存，无存储，最大年龄 = 0，必须重新验证
- Pragma = 无缓存
In My case I am using spring-boot and to remove these header I had to do following . which solved the issue as well.
在我的情况下，我使用 spring-boot 并删除这些标题，我必须按照 . 这也解决了这个问题。
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
public void configure(HttpSecurity http) throws Exception {
http.headers().defaultsDisabled()
.addHeaderWriter(new StaticHeadersWriter("Cache-Control"," no-cache,max-age=0, must-revalidate"))
.addHeaderWriter(new StaticHeadersWriter("Expires","0"));
}
}
回答by user2173353
Here is my fix:
这是我的修复：
Using the URL Rewrite Addon for IIS to set Cache-Controlheader for all EOT files:
使用 IIS 的 URL 重写插件Cache-Control为所有 EOT 文件设置标题：
<system.webServer>
....
<rewrite>
<outboundRules>
<rule name="Fix IE9 missing font icons">
<match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
<conditions>
<add input="{REQUEST_URI}" pattern="\.eot.*" />
</conditions>
<action type="Rewrite" value="private, max-age=36000" />
</rule>
</outboundRules>
</rewrite>
</system.webServer>
回答by TObject
Without cache headers, I have noticed that IE9clients on Windows Vistastill do not load fonts (even though on my newer development machine IE11 in IE9 emulation mode does so).
在没有缓存头的情况下，我注意到Windows Vista上的IE9客户端仍然不加载字体（即使在我较新的开发机器上 IE9 仿真模式下的 IE11 上也是如此）。
I was able to fix the issue on the client machines, in the Internet Explorer, by going to:
我能够在 Internet Explorer 中修复客户端计算机上的问题，方法是：
- Internet Options
- Advanced
- Security
- 互联网选项
- 先进的
- 安全
And unchecking the “Do not save encrypted pages to disk” option.
并取消选中“不要将加密的页面保存到磁盘”选项。
Bonus Reading
奖励阅读
- Eric Lawrence: Avoid “Do not save encrypted pages to disk”(archive)
- 埃里克·劳伦斯：避免“不要将加密的页面保存到磁盘” （存档）
HTH
HTH
回答by amcc
I seem to remember certain versions of IE cannot use an @fontface font hosted outside the site's domain (If the page is at http://a.domain.tld/page.html- font must also be in the http://a.domain.tld/) for one reason or another. Put the EOT file on your domain and try again maybe.
我似乎记得某些版本的 IE 不能使用托管在站点域之外的 @fontface 字体（如果页面位于http://a.domain.tld/page.html- 字体也必须在http://a .domain.tld/）出于某种原因。将 EOT 文件放在您的域中，然后再试一次。
回答by sri_bb
This issue has now been resolved by adding the following entries to the httpd.conf or .htaccess in apache server.
现在已通过将以下条目添加到 apache 服务器中的 httpd.conf 或 .htaccess 来解决此问题。
In order to get it to work we have changed from using FilesMatch to LocationMatch and now the headers are being set perfectly.
为了让它工作，我们已经从使用 FilesMatch 更改为 LocationMatch，现在标题设置得非常完美。
To set right mime-types for font files, add this lines to config:
要为字体文件设置正确的 MIME 类型，请将此行添加到配置中：
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
To update font files headers, This fix perfectly worked to render Font Icons in IE Browsers.
为了更新字体文件标题，此修复完美地在 IE 浏览器中呈现字体图标。
<LocationMatch "\.(eot|otf|woff|ttf)$">
Header unset Cache-Control
Header unset no-store
</LocationMatch >
回答by Ar2r
Working solution for Apache/2.2.15 is to add .htaccess
Apache/2.2.15 的工作解决方案是添加 .htaccess
<FilesMatch "\.(woff)$">
Header unset Cache-control
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Cache-control
</FilesMatch>
回答by mahi-man
I Faced a similar issue, but it was the Varyheader that was the culprit. In my setup I was using Ruby on Rails with the rack-corsgem. It was giving the font files a header of Vary: Origin. To fix this you can set the header to Accept-Encodingwhere you set up the middleware:
我遇到了类似的问题，但Vary罪魁祸首是标题。在我的设置中，我使用带有rack-corsgem 的Ruby on Rails 。它给字体文件一个Vary: Origin. 要解决此问题，您可以将标头设置为Accept-Encoding设置中间件的位置：
config.middleware.insert_before 0, "Rack::Cors", :debug => true, :logger => (-> { Rails.logger }) do
allow do
origins '*'
resource '/cors',
:headers => :any,
:methods => [:post],
:credentials => true,
:max_age => 0
resource '*',
:headers => :any,
:methods => [:get, :post, :delete, :put, :options, :head],
:max_age => 0,
vary: ['Accept-Encoding'] # Required or IE11 fonts will break
end
end
回答by ldg
Did you try directly downloading the EOT file over https? The SSL certificate appears to be bad (mismatched), which could very well be your problem.
您是否尝试通过https直接下载EOT文件？SSL 证书似乎不好（不匹配），这很可能是您的问题。
You should also make sure that there is a cross-domain policy set up for those files so while it may not be a factor in this issue, it could cause problems for certain browsers.
您还应该确保为这些文件设置了跨域策略，因此虽然它可能不是此问题的一个因素，但它可能会导致某些浏览器出现问题。
