我正在标题中加载自定义字体:
<link rel="stylesheet" href="//example.com/stylesheets/custom-font.css"/>
在那个样式表中我有一个 CSS block :
@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 加载时，恢复为后备字体 (sans-serif) 并在控制台中显示这些错误:
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 正确加载？
最佳答案
尝试取消设置此文件类型的 vary header 。如果您也使用其他文件类型，那么也对它们执行相同的操作。
<FilesMatch "\.(woff)$">
Header unset Vary
</FilesMatch>
关于html - 通过 HTTP 和 HTTPS 加载自定义字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33785209/