字体家族无法在我的网站上正确显示

Question

我不确定我在网站上使用的CSS字体系列发生了什么。 直到昨天，它一直在努力。 然后今天早上它停止在Chrome上运行，然后在FireFox＆Safari（Mac）上停止运行。

奇怪的是，在我的一台队友计算机（Linux）上看起来不错，但在朋友的Mac计算机上看起来也不错。 不知道发生了什么。 当我检查元素时，我可以看到CSS font-family属性，但是该属性被划掉了，好像字体没有加载。

这就是我在CSS上添加字体的方式：

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);

这就是现在的样子以及应该的样子 。

完全卡住了，不知道发生了什么。

Answer 1

除去零件|Helvetica+Neue:400,500,700 。

Google Web字体不包含Helvetica Neue。 它是一种商业字体，不能免费使用，也可能无法作为网络字体付费使用。

如果您的请求中的Google Web Fonts不存在某种字体，则Google服务器会以403 Forbidden进行响应，并且不发送任何字体。 如果使用开发人员工具（F12）并在加载页面时查看“网络”部分，则可以看到此信息。

当您将请求拆分为三个请求时，每个字体家族一个，其他请求成功。 但是，在一个请求中同时包含两个字体系列并删除Helvetica Neue（或将其替换为Google实际拥有的某种字体），效率更高。

Answer 2

好，让它工作。 不知道发生了什么。 我所做的就是更改行：

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700|Open+Sans:600italic,400,600,700|Helvetica+Neue:400,500,700);

至：

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,600,700);
@import url(http://fonts.googleapis.com/css?family=Helvetica+Neue:400,500,700);

Answer 3

Helvetica Neue实际上可从Google Fonts获得：

http://fonts.googleapis.com/css?family=Helvetica+Neue