谷歌字体在火狐浏览器中无法使用

Question

我真的无法在Firefox中使用Google字体。基本上，我从Google字体中选择了一种字体，在其他浏览器中它可以正常工作，但是在Firefox中却不起作用。

我的源代码：

<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet" type="text/css" />

"而且，我试过放置那个.htaccess文件，但它没有起作用：

.htaccess："

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

“有人救我吗？”

- user2154508

---

Access-Control-Allow-Origin 头是为 托管 字体的网站而设计的。也就是说，谷歌会发送这样的头信息。你只需要在 CSS 中使用该字体即可。请使用 Ctrl-Shift-K 组合键打开 Firefox 的控制台。是否有任何消息？ - Boldewyn

哦，伙计，我找到答案了，基本上是从字体系列中删除“sans-serif”。 - user2154508

很高兴它现在可以工作了。但是，当你将字体文件存储在自己的服务器上后，请记住上面的 .htaccess 片段。 - Boldewyn

可能是Google字体在Firefox中无法正确呈现的重复问题。 - rogerdpack

Answer 1

我发现了一个重要的解决方案，可以使Google字体在Firefox中正常工作。

这个解决方案涉及将@font-face添加到你的样式表中。

奇怪的是，在我使用Firefox时，这是偶然发现的。

在Firefox中，转到Google.com/fonts并在列表中找到你的字体。

假设它已经正确呈现，选择一部分文本，右键单击并检查元素。

如果你的检查元素是侧面安装的，则在底部标签旁边选择“字体”，如果它是底部安装的，则在右侧标签旁边选择“字体”。

现在，你应该能够看到与你选择的字体相关的CSS代码。它使用不同于Google在他们的样式表中提供给你的链接。

对于你的PT Sans，这应该有效。

@font-face {
    font-family: "PT Sans";
    font-style: normal;
    font-weight: 400;
    src: local("PT Sans"), local("PTSans-Regular"),     url("http://fonts.gstatic.com/l/font?kit=fQl5KuJ0t7CxaofpRWHFZ5uy9QftGgiCbPT5J2Tle6QGEtCW0q5T6QHEAICoCh1h9R715REvNVFz5maQ3RAjMvuvYlUZxjWJuWoIFYd8ZVs9VGRJmXaKNSd0UG6XHo4E") format("woff2"), url("http://fonts.gstatic.com/l/font?kit=9HC7E4PH-EC-60ASiiwijJuy9QftGgiCbPT5J2Tle6QGEtCW0q5T6QHEAICoCh1h9R715REvNVFz5maQ3RAjMvuvYlUZxjWJuWoIFYd8ZVs9VGRJmXaKNSd0UG6XHo4E") format("woff");
}

另外，当您应用字体系列时，请按照以下方式进行。

font-family: 'PT Sans', sans-serif !important;

迄今为止，这对我所遇到的每种字体都起作用。

虽然我有点晚了，但如果您仍然没有解决方案，我希望这可以帮到您。

- KoT

Answer 2

我刚遇到同样的问题，调试器非常好用！将这行代码中的草书字体：

font-family:'Tangerine' cursive, 'Arial, Helvetica';

修改为：

font-family:'Tangerine', 'Arial, Helvetica';

已解决火狐浏览器的问题 :)

- sunto

Answer 3

嗯，我也遇到了这个问题。我漏掉了“，”元素。 我写成了font-family:'Open Sans' sans-serif;然后我在'Open Sans'后面加了,，这对我起作用了。

- Tauras