Css @字体面EOT未通过HTTPS加载 总结

我在IE 7,8,9中使用HTTPS上的@font-face遇到了一个问题-它根本没有加载。无论包含HTML的页面是否托管在HTTPS上，当我尝试通过HTTP加载EOT字体时，它工作，HTTPS不工作。有人见过这种行为吗

承载字体的服务器正在发送正确的内容类型=“application/vnd.ms fontobject”

我尝试了多种字体，所以它不是特定于字体的

字体是在上生成的

CSS语法 样本页

---

尝试使用https://...。由于https由于文件的放大和不可压缩而速度较慢，所以有一些技巧可以提供混合的http/https内容，而不会收到“不安全内容”警告。你可以搜索它们。从不需要使用这些技巧。

我似乎记得某些版本的IE由于某种原因无法使用网站域外托管的@fontface字体（如果页面位于-font中，则该字体也必须位于中）。将EOT文件放在您的域中，然后重试

---

您是否尝试通过https直接下载EOT文件？SSL证书似乎不正确（不匹配），这很可能是您的问题

---

您还应该确保为这些文件设置了跨域策略，因此，虽然这可能不是此问题的一个因素，但可能会导致某些浏览器出现问题。

这听起来像是您的CDN出现了问题。您可以通过更改主机文件来验证这一点，使SSL域指向为您的非SSL通信提供服务的任何IP。如果字体呈现，您需要调用您的CDN，了解他们的服务器对字体文件做了什么。

好的，据我所知，这是一个IE8错误。我创建了一个至少可以在Apache上使用的解决方案—使用mod_rewrite对以“.eot”或“.eot”结尾的请求强制使用HTTP，并对所有其他请求强制使用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>

重新启动发动机
#如果HTTPS请求，如果文件以“.eot”或“.eot”结尾，则强制使用HTTP
重写cond%{SERVER_PORT}443
重写条件%{REQUEST_URI}^.*\.eot\$
重写规则（.*）http://%{http_HOST}%{REQUEST_URI}[R=301，L]
#若HTTP请求，若文件不以“.eot”或“.eot”结尾，则强制使用HTTPS
重写cond%{SERVER_PORT}80
重写条件%{REQUEST\u URI}！。*\。eot\$
重写规则（.*）https://%{HTTP_HOST}%{REQUEST_URI}[R=301，L]

---

不太好看，我相信它会增加一些服务器开销，在每个请求中运行字符串比较，但它解决了这个问题：）

我在HTTPS中遇到了这个问题，而不是HTTP。出于某种原因，IE将继续使用不同的字体选项，忽略

200 OK

响应

在我的例子中，问题是HTTP头

缓存控制：字体没有缓存。虽然这可以很好地用于HTTP，但通过HTTPS，它会导致Internet Explorer忽略下载的字体

我最好的猜测是，这是这种行为的一种变体：

（）

因此，如果您看到IE在开发者工具网络视图中处理每种字体，那么您可能需要检查一下是否有
缓存控件
标题并将其删除。
您好，我刚刚遇到了同样的问题，并且找到了解决方法，希望这能帮助其他人

这是IE中的一个错误我知道这是一个旧线程，但我只是不得不权衡一下。所有版本的Internet Explorer（7-11）中的EOT和WOFF字体都存在相同的问题，无法通过HTTPS加载。经过数小时的尝试和错误，并将我们的标题与其他工作站点进行比较，我们发现是
vary
标题把事情搞砸了。取消设置这些文件类型的头立即解决了我们的问题

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>


割台未设置变化
割台未设置变化

额外阅读

埃里克·劳伦斯：（）
IE博客：（）
想分享我的情况和解决方案，希望它能帮助下一个人

我的字体是通过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添加了这个头，因为我们通过cookies使用粘性会话，我猜负载平衡器配置为在这样设置时使用这个
缓存控制
头

因此，关闭粘性会话会删除标题，并导致字体呈现。我们能够为HTTP请求关闭粘性会话，为HTTPS请求保留粘性会话，这很好，因为我们对任何非静态资产强制使用SSL，但很高兴为CloudFront提供静态资产，无论是否使用SSL

希望其他人能发现这些信息有用。
如果没有缓存头，我注意到Windows Vista上的IE9客户端仍然不加载字体（即使在我较新的开发机器上，IE11在IE9模拟模式下也不加载字体）

我可以在Internet Explorer中通过以下步骤解决客户端计算机上的问题：


互联网选项
先进的
保安

并取消选中“不将加密页面保存到磁盘””选项

额外阅读

埃里克·劳伦斯：（）

HTH
这通常是由于在下载.woff时出现以下响应头导致的
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=100000
Cache-Control: no-cache="set-cookie"

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"));
 }
}

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

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

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

<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>

 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 >

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

@font-face {
    font-family: 'your font name';
    src: url('data:application/font-woff2;charset=utf-8;base64,...base64FontWoff2...') format('woff2'),url('data:application/font-woff;charset=utf-8;base64,...base64FontWoff...') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}