css - 如何修复自定义字体的 CORS 错误？

Question

我上传的自定义字体没有显示在 Firefox 或 Chrome 上，尽管它可以在 Safari 和移动设备上运行。我收到 CORS 错误“CORS 策略:无‘Access-Control-Allow-Origin’”。

会不会是样式表链接？

(link rel="stylesheet"type="text/css"href="http://go.pardot.com/l/752313/2019-06-15/pfv/752313/4021/1711_JKVABE.css")

这是页面的链接:http://go.pardot.com/l/752313/2019-06-07/g4s

    @font-face {
        font-family: 'Canela Web';
        src: url('http://go.pardot.com/l/752313/2019-06-15/pfs/752313/4019/Canela_Regular_Web.eot');
        src: url('http://go.pardot.com/l/752313/2019-06-15/pfs/752313/4019/Canela_Regular_Web.eot?#iefix') format('embedded-opentype'),
             url('http://go.pardot.com/l/752313/2019-06-15/pfn/752313/4015/Canela_Regular_Web.woff2') format('woff2'),
             url('http://go.pardot.com/l/752313/2019-06-15/pfq/752313/4017/Canela_Regular_Web.woff') format('woff');
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }

    .Canela-Regular-Web {
        font-family: 'Canela Web';
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }

Answer 1

我遇到了类似的问题。要修复此特定错误，CSP 应包括以下内容:

font-src 'self' data:;

所以，在 head 标签中应该设置这个元:

<meta http-equiv="Content-Security-Policy" content="connect-src * 'unsafe-inline'; font-src 'self' data:;">