不能在firefox和chrome中使用的字形

Question

我在我的应用程序中使用的bootstrap glyphicons仅适用于safari，而不适用于chrome或firefox。下面给出了glyphicons的图像。

我使用cloudfront托管所有静态内容。 我之前发过一个类似的问题，答案指出CDN上的配置可能是问题，因为它在开发上工作得非常好。我对CDN所做的更改如下。

提到的答案是将生产环境主机名列入白名单。我点击了＆＃34;发布＆＃34;，＆＃34;发布设置＆＃34;和＆＃34;行为＆＃34;选项卡，然后我点击＆＃34;编辑＆＃34;。 我将“正向标题”从“无（改进缓存）”更改为“白名单”。将出现“白名单标题”部分，并添加了“＃34; host＆＃34;到列表。这是我唯一可以＆＃34;白名单＆＃34;主机名。我不确定我是否正确地做到了这一点。

它仍然无法使用chrome。我尝试使用firefox来查看chrome是否是问题，但它也没有在firefox上运行。它只适用于野生动物园。

我还在生产环境中设置了config.serve_static_files = true。

正如我所提到的，我之前发布了一个类似的问题，但没有解决方案。任何帮助将受到高度赞赏。谢谢！

查看Chrome控制台后，我看到以下错误。

https://d24b01zeuxnthb.cloudfront.net/assets/bootstrap/glyphicons-halflings…gular-bd18efd3efd70fec8ad09611a20cdbf99440b2c1d40085c29be036f891d65358.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
https://d24b01zeuxnthb.cloudfront.net/assets/sprites/social-share-button@2x-a597120b30fe6ae4ac5b4f0f45f307c0f5519851529b3010a7c584eb3ed186be.png Failed to load resource: the server responded with a status of 404 (Not Found)

Font from origin 'https://xxxxxxxxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://scorecliq.herokuapp.com' is therefore not allowed access.

Answer 1

我试过访问.tff和我有404.同样没有发生.png。因此，请检查以确保.tff文件已提交给Prod。但这是由HTTPS跨域资源引用引起的问题，如果源使用相同的TLD和通配SSL证书，则可以减轻这些问题。如您所知，在使用HTTPS资源的HTTP应用程序中也不会发生同样的情况。

虽然CDN具有减少应用资源和便利性的便利性。加载时间也会带来一些警告。在这种情况下，您需要删除CDN以避免跨域问题并将glyphicons字体移动到项目中。只要所有文件都已正确提交和发布，这将解决您在任何环境中遇到的问题。