通过 HTTP 和 HTTPS 加载自定义字体答案

【问题标题】：Loading Custom Fonts over HTTP and HTTPS通过 HTTP 和 HTTPS 加载自定义字体
【发布时间】：2016-02-20 11:49:34
【问题描述】：

我正在像这样在标题中加载自定义字体：

<link rel="stylesheet" href="//example.com/stylesheets/custom-font.css"/>

在那个样式表中，我有一个 CSS 块：

@font-face {
    font-family: 'soneregular';
    src: url('//example.com/fonts/webfont.eot');
    src: url('//example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('//example.com/fonts/webfont.woff2') format('woff2'),
         url('//example.com/fonts/webfont.woff') format('woff'),
         url('//example.com/fonts/webfont.ttf') format('truetype'),
         url('//example.com/fonts/webfont.svg#soneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

当我通过 HTTP 加载页面时，自定义字体加载正常，但当通过 HTTPS 加载页面时，将恢复为备用字体（无衬线）并在控制台中显示这些错误：

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.woff2'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.woff'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://example.com/ecom/myAccount/myAccount.do?forward=/' was loaded over HTTPS, but requested an insecure font 'http://example.com/fonts/webfont.ttf'. This request has been blocked; the content must be served over HTTPS.

我需要做什么才能让这些自定义字体通过 HTTP 和 HTTPS 正确加载？

【问题讨论】：

我不擅长这个，但我认为你需要看看你的服务器如何响应字体请求，如果你的网站运行 https，你需要确保你的资产得到服务也可以通过 https，当没有像 //address.com 那样指定协议时，您的服务器可能决定默认为 http
哦 - 下面是针对特定服务器配置的答案，如果您至少可以分享您正在使用的服务器软件的名称 apache 或 nginx 例如其他人可以提供帮助你更好:)

标签： html css http fonts https

【解决方案1】：

尝试取消设置此文件类型的 vary 标头。如果您也使用其他文件类型，那么也对它们执行相同的操作。

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

【讨论】：