托管在 Google Drive 上时，Google Web 字体不会显示在 Chrome 中答案

【问题标题】：Google Web Font wont display in Chrome, when hosted on Google Drive托管在 Google Drive 上时，Google Web 字体不会显示在 Chrome 中
【发布时间】：2013-12-30 04:12:51
【问题描述】：

我遇到了奇怪的网络字体问题。我正在使用谷歌网络字体，当我从本地主机查看时，一切看起来都很好。我什至在我的笔记本电脑上运行了 MAMP，所以我可以从实际的服务器上看到它的外观。同样，一切看起来都很好。但是，一旦我将文件上传到 Google Drive 以便共享文件，该字体就会停止在 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 Drive 上都可以正常工作
Firefox:5.0.1 - 在本地和 Google Drive 上都可以正常工作
iOS Safari - 在本地和 Google Drive 上都能正常工作
iOS Chrome - 在本地和 Google 云端硬盘都可以正常工作

【问题讨论】：

标签： css google-chrome google-drive-api webfonts

【解决方案1】：

您在 Google 驱动器中的应用在 HTTPS 下，但您尝试从 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。将来会对你有所帮助。

【讨论】：

【解决方案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

【讨论】：