我在IE 7,8,9中通过HTTPS使用@ font-face遇到了一个问题 - 它根本就没有加载。包含HTML页面是否托管在HTTPS上并不重要，当我尝试通过HTTP加载EOT字体时，它不起作用，HTTPS不是。有没有人见过这种行为？
托管该字体的服务器正在发送正确的content-type =“application / vnd.ms-fontobject”
我尝试了多种字体，因此它并不特定于字体。
字体是在Font Squirrel
生成的@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;
}
答案 0 :(得分：42)
我使用HTTPS遇到了这个问题，但不是HTTP。出于某种原因，IE将继续使用不同的字体选项，忽略200 OK响应。
就我而言，问题是字体的HTTP标头Cache-Control: no-cache。虽然这适用于HTTP，但通过HTTPS会导致Internet Explorer忽略下载的字体。
我最好的猜测是，这是此行为的变体：
KB 815313 - Prevent caching when you download active documents over SSL （archive）
因此，如果您在开发人员工具网络视图中看到IE通过每种字体工作，则可能值得检查您是否有Cache-Control标头并将其删除。
答案 1 :(得分：23)
我知道这是一个旧线程，但我不得不权衡。我们在所有版本的Internet Explorer（7-11）中没有通过HTTPS加载的EOT和WOFF字体存在同样的问题。经过数小时的试验和错误，并将我们的标题与其他工作网站进行比较后，我们发现vary标题正在弄乱。取消设置这些文件类型的标题可以立即修复我们的问题。
<FilesMatch "\.(woff)$">
Header unset Vary
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Vary
</FilesMatch>
答案 2 :(得分：7)
这通常是因为在下载.woff或.eot文件时出现以下响应标题。
在我的情况下，我使用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"));
}
}
答案 3 :(得分：4)
如果没有缓存标头，我注意到 Windows Vista 上的 IE9 客户端仍然无法加载字体（即使在IE9仿真模式下我的新开发机IE11上也是如此）。
我能够通过访问：
在Internet Explorer中修复客户端计算机上的问题取消选中“不将加密的网页保存到磁盘”选项。
HTH
答案 4 :(得分：4)
这是我的修复：
使用URL重写Addon for IIS为所有EOT文件设置Cache-Control标头：
<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>
答案 5 :(得分：3)
我似乎记得IE的某些版本不能使用在网站域外托管的@fontface字体（如果页面位于http://a.domain.tld/page.html - 字体也必须在http://a.domain.tld/中），原因有一个或者另一个。将EOT文件放在您的域上，然后重试。
答案 6 :(得分：2)
现在已通过将以下条目添加到apache服务器中的httpd.conf或.htaccess来解决此问题。
为了让它发挥作用，我们已经从使用FilesMatch变为LocationMatch，现在标题设置得非常完美。
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
<LocationMatch "\.(eot|otf|woff|ttf)$">
Header unset Cache-Control
Header unset no-store
</LocationMatch >
答案 7 :(得分：2)
Apache / 2.2.15的工作解决方案是添加.htaccess
<FilesMatch "\.(woff)$">
Header unset Cache-control
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Cache-control
</FilesMatch>
答案 8 :(得分：1)
您是否尝试通过https直接下载EOT文件？ SSL证书看起来很糟糕（不匹配），这很可能是你的问题。
您还应该确保为这些文件设置了跨域策略，因此虽然它可能不是此问题的一个因素，但它可能会导致某些浏览器出现问题。
答案 9 :(得分：1)
这听起来像你的CDN有问题。您可以通过更改主机文件来验证这一点，以使您的SSL域指向您的非SSL流量所服务的任何IP。如果字体呈现，您需要调用CDN并找出他们的服务器对字体文件的作用。
答案 10 :(得分：0)
我能够通过不使用https页面上IE中的字体来解决该问题。我发现的唯一可行的选择是通过CSS在base64中下载字体
function replaceData(chart, data) {
chart.data.labels = Object.keys(data);
chart.data.datasets.forEach((dataset) => {
dataset.data = Object.values(data);
});
chart.update();
}
在此站点上，您可以在此处准备一个CSS文件-https://transfonter.org/
答案 11 :(得分：0)
使用 https：// ... 尝试完整网址。由于扩展和不可压缩文件，https速度较慢，因此有一些技巧可以提供混合的http / https内容，而不会出现“不安全的内容”警告。你可以搜索它们。永远不需要使用这些技巧。
答案 12 :(得分：0)
在使用HTTP的情况下，通过HTTPS在IE 11中使用网络字体可能会出现问题。
受影响的IE 11仅特定版本，例如
两个都是Win 7上的IE。我在Win 8或Win 10上都没有看到这个问题。
即使Google声明支持Microsoft Internet Explorer 6+版本，其字体也会受到与上述相同的影响。
目前，我还没有解决方法，甚至没有通过HTML / CSS / JavaScript检测受影响版本的方法。
答案 13 :(得分：0)
相当陈旧的问题，但我认为没有人正确回答。问题是该字体已从另一个文件加载，对我而言，这似乎是Access-Controll-Allow-Origin的情况。
它正在向前工作，在虚拟主机文件或.htaccess中添加以下内容：
An HTTP error 403 occurred:
{
"error": {
"errors": [
{
"domain": "global",
"reason": "insufficientPermissions",
"message": "Insufficient Permission"
}
],
"code": 403,
"message": "Insufficient Permission"
}
}
并重新启动apache
答案 14 :(得分：0)
希望分享我的情况和解决方案，希望能帮助下一个人。
我的字体是通过 HTTPS 通过 Amazon CloudFront 提供的，该链接被配置为从位于弹性负载均衡器后面的应用程序提供静态资产
字体有以下标题：
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=100000
Cache-Control: no-cache="set-cookie"
基于我可以在互联网上找到的其他答案和内容，我希望这可以工作，因为它设置了max-age并且具有正确的CORS配置。但是，IE9仍然不会渲染字体。
问题原来是Cache-Control: no-cache="set-cookie"标题，这让我感到惊讶，因为它只是说不缓存Set-Cookie标题（除非我弄错了）。
我花了一段时间才弄清楚那个标题的来源。这个标题是由我们的 ELB 添加的，因为我们通过Cookie使用粘性会话，我想负载均衡器配置为在设置时使用此Cache-Control标头。
因此关闭粘性会话会删除标题，并导致字体呈现。我们能够关闭HTTP请求的粘性会话，并将它们保留为HTTPS请求，这很好，因为我们强制SSL用于任何非静态资产，但很乐意使用或不使用SSL将静态资产提供给CloudFront。
希望其他人能够发现此信息有用。
答案 15 :(得分：0)
嗨，我刚遇到同样的问题，我找到了解决办法，希望这可以帮助别人。
这是IE＆lt; = 8中的错误评论。您可以在此处查看有关此问题的一些信息https://communities.bmc.com/thread/88899。基本上问题是通过https使用缓存下载IE中的文件：设置了无缓存标头，尝试删除缓存标头以查看这是否是您的问题。
答案 16 :(得分：0)
好的，据我所知，这是一个IE8错误。我创建了一个至少适用于Apache的解决方法 - 使用mod_rewrite强制HTTP以“.eot”或“.eot”结尾的请求并强制HTTPS用于所有其他请求。在.htaccess文件中，执行：
<IfModule mod_rewrite.c>
RewriteEngine on
# if HTTPS request, force to HTTP if file ends in '.eot' or '.eot?'
RewriteCond %{SERVER_PORT} 443
RewriteCond %{REQUEST_URI} ^.*\.eot\??$
RewriteRule (.*) http://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# if HTTP request, force to HTTPS if file does NOT end in '.eot' or '.eot?'
RewriteCond %{SERVER_PORT} 80
RewriteCond %{REQUEST_URI} !.*\.eot\??$
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
不完全漂亮，我确信它会增加一些服务器开销，每个请求运行字符串比较，但它解决了问题：）