Question

不确定为什么，但@ font-face已停止在我的多个网站上工作（Blogger＆amp; Wordpress）。我以前使用Google Drive来托管以下字体：

@font-face {font-family: 'Biloxi';
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot');
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot') format('embedded-opentype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.woff') format('woff'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.ttf') format('truetype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

当它停止工作时，我尝试在我的服务器上托管字体并链接到文件中的字体，如下所示，但即使这样也没有加载我发现奇怪的字体。

@font-face {
font-family: 'Shorelines Script';
src: url('ShorelinesScriptBold.eot');
src: url('ShorelinesScriptBold.eot?#iefix') format('embedded-opentype'),
    url('ShorelinesScriptBold.woff') format('woff'),
    url('ShorelinesScriptBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

似乎是零星的，所以字体会加载一分钟，但随后你刷新并且不会加载（例如http://hummingbirdgattodesign.blogspot.co.uk/）。问题出现在Blogger和Wordpress上，似乎是在Chrome和Firefox上。

作为一名相对缺乏经验的编码员，我们非常感谢任何帮助！

Answer 1

浏览器似乎阻止了对网络字体文件的请求，因为它们不会与Access-Control-Allow-Origin标头集一起发送。在Chrome / Firefox的开发者工具中查看控制台，您将看到错误：

来自原点的字体＆＃39; https://googledrive.com＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://hummingbirdgattodesign.blogspot.co.uk＆＃39;因此不允许访问。响应具有HTTP状态代码502.

我建议您寻找另一个托管字体文件的位置，因为我不认为Google云端硬盘会为您设置此标头（例如：Access-Control-Allow-Origin error on Google Drive web site）。通过Amazon AWS或Google Cloud平台提供服务，您可以更好地控制此类事件。

@ font-face停止了工作

1 个答案: