@ font-face EOT未通过HTTPS加载

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了@ font-face EOT未通过HTTPS加载相关的知识，希望对你有一定的参考价值。

摘要

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

托管该字体的服务器正在发送正确的content-type =“application / vnd.ms-fontobject”

我尝试了多种字体，因此它并不特定于字体。

这些字体是在Font Squirrel上生成的

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

样本页面

http://gregnettles.net/dev/font-face-test.html

答案

我知道这是一个老线程，但我不得不权衡。我们在所有版本的Internet Explorer（7-11）中没有通过HTTPS加载的EOT和WOFF字体也存在同样的问题。经过几个小时的试验和错误，并将我们的标题与其他工作网站进行比较后，我们发现这是vary标题搞砸了。取消设置这些文件类型的标头立即解决了我们的问题。

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

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

奖金阅读

另一答案

这听起来像你的CDN的问题。您可以通过更改主机文件来验证这一点，以使您的SSL域指向您的非SSL流量所服务的任何IP。如果字体呈现，则需要调用CDN并确定其服务器对字体文件的作用。

另一答案

我面临类似的问题，但是Vary标题是罪魁祸首。在我的设置中，我使用Ruby on Rails和rack-cors gem。它给了字体文件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
另一答案

使用https：// ...尝试完整的网址。由于扩展和不可压缩文件，https速度较慢，因此有一些技巧可以提供混合的http / https内容，而不会出现“不安全的内容”警告。你可以搜索它们。永远不需要使用这样的技巧。

另一答案

好吧，据我所知，这是一个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>

不完全漂亮，我确信它会增加一些服务器开销，每个请求运行字符串比较，但它修复了问题:)

另一答案

嗨，我刚遇到同样的问题，我找到了解决办法，希望这可以帮助别人。

这是IE <= 8中的错误评论。你可以在这里查看有关问题的一些信息https://communities.bmc.com/thread/88899。基本上问题是在IE中通过https下载文件，缓存：设置了无缓存标头，尝试删除缓存标头以查看这是否是您的问题。

这个答案也可能有助于IE : Unable to download * from *. Unable to open this Internet site. The requested site is either unavailable or cannot be found

另一答案

希望分享我的情况和解决方案，希望它能帮助下一个人。

我的字体是通过Amazon CloudFront通过HTTPS提供的，它被配置为从我们位于Elastic Load Balancer后面的应用程序提供静态资产。

这些字体有以下标题：

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。

希望其他人能够发现这些信息有用。

另一答案

相当古老的问题，但我认为没有人正确回答。问题是该字体已从另一个文件加载，对我来说这似乎是Access-Controll-Allow-Origin的情况。

它非常直接地在您的虚拟主机文件或.htaccess中添加以下内容：

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

并重新启动apache

另一答案

使用基于HTTPS的IE 11的Web字体可能是问题，而使用HTTP工作正常。

仅影响IE 11的特定版本，例如

  • 版本11.0.9600.19035，更新版本11.0.65
  • 版本11.0.9600.17728，更新版本11.0.18。

两者都是Win 7上的IE。我没有在Win 8或Win 10上看到过这个问题。

即使Google声明支持Microsoft Internet Explorer 6+版本，其字体也会受到影响，其方式与上述相同。

目前我知道没有解决方法，甚至没有通过HTML / CSS / javascript检测受影响版本的方法。

另一答案

我用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标头并将其删除。

另一答案

这通常是由于在下载.woff或.eot文件时跟随响应标头而发生的。

  • Cache-Control = no-cache，no-store，max-age = 0，must-revalidate
  • Pragma = no-cache

在我的情况下，我使用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"));
 }
}
另一答案

这是我的修复：

使用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>
另一答案

没有缓存标头，我注意到Windows Vista上的IE9客户端仍然不加载字体（即使在IE9模拟模式下我的新开发机IE11上也是如此）。

我能够通过以下方式在Internet Explorer中修复客户端计算机上的问题：

  • 互联网选项
  • 高级
  • 安全

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

奖金阅读

HTH

另一答案

我似乎记得IE的某些版本不能使用在网站域外托管的@fontface字体（如果页面位于http://a.domain.tld/page.html - 字体也必须在http://a.domain.tld/中），原因有这样或那样。将EOT文件放在您的域上，然后重试。

IE9 blocks download of cross-origin web font

另一答案

Apache / 2.2.15的工作解决方案是添加.htaccess

<FilesMatch ".(woff)$">
    Header unset Cache-control
</FilesMatc
以上是关于@ font-face EOT未通过HTTPS加载的主要内容，如果未能解决你的问题，请参考以下文章
 

 加载资源失败：404（未找到）- Rails 自定义字体


 IE8 上的 @font-face datauri 是不是支持 .eot 字体？


 在 IE 中使用 @font-face 显示未设置样式的内容


 如何通过 CORS 策略加载字体？


 从icomoon加载自定义字体


 font-family与font-face的区别