Question

我有一个奇怪的网络字体问题。我正在使用谷歌网络字体，当我从本地主机查看时，一切看起来都很好。我甚至在我的笔记本电脑上运行MAMP，所以我可以看到它应该从实际的服务器看起来如何。一切都很好看。但是，一旦我将文件上传到Google云端硬盘，以便我可以共享该文件，该字体就会停止在Chrome中显示。它适用于Safari，Firefox，iOS Safari甚至iOS Chrome，但它在我的笔记本电脑上无法在Chrome中使用。

操作系统：Mac OS X 10.8.4
Chrome：31.0.1650.63 - 来自本地，不适用于Google云端硬盘 Safari：6.0.5 - 本地和Google云端硬盘都可以正常使用 Firefox：5.0.1 - 本地和谷歌驱动器的工作正常 iOS Safari - 从本地和谷歌驱动器上工作正常 iOS Chrome - 在本地和Google云端硬盘上运行良好

有问题的页面： https://googledrive.com/host/0B0LF26cYLcG7ZThfUGF5TFE1eUE/index.html

Answer 1

您的应用在 HTTPS 下的Google驱动器中，但您尝试从 HTTP 加载字体在font-face指令

中加载字体时，只需将http更改为https

[blocked] The page at 'https://googledrive.com/host/0B0LF26cYLcG7ZThfUGF5TFE1eUE/index.html' was loaded over HTTPS, but ran insecure content from 'http://fonts.googleapis.com/css?family=Exo+2:400,400italic,700': this content should also be loaded over HTTPS.

你需要学习如何在chrome中使用devtools。它将在未来帮助你。

Answer 2

尝试在你的CSS文件链接前放置两个点 - 虽然Chrome解决了它可能会导致问题 - 有一个点是不正确的。

<link href="./css/style.css" rel="stylesheet"></link>

应该是

<link href="../css/style.css" rel="stylesheet"></link>

除此之外一切看起来都很好。可能是一个更技术性的问题

并使用https://fonts.googleapis.com/css?family=Exo+2:400,400italic,700

../js/respond.min.js

这也应该是

../ JS / respond.min.js

在Google云端硬盘上托管时，Google网络字体不会显示在Chrome中

2 个答案: