Question

对于我的网站我使用了几种谷歌字体：

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,300italic,400italic&subset=latin,latin-ext);

@font-face {
    font-family: 'Montserrat', sans-serif;
    font-family: 'Raleway', sans-serif;
}

在Chrome和Safari中工作得很好，但在Firefox（我试过47和47.0.1）字体＆＃34;蒙特塞拉特＆＃34;没有被取代。

非常好奇，因为我在控制台中没有出现网络错误或没有其他错误，只有一个无法正常工作，另一个工作正常。

你知道任何解决方案吗？谢谢！

Answer 1

我也有这个问题。然而，我确实在链接标记中加载了谷歌字体。以下对我有用，但我不确定原因。

最初我的链接标记看起来像这样（在Firefox中没有用）：

<link rel='stylesheet' type='text/css' href='https://fonts.googleapis.com/css?family=Lato:300,400' />

当我删除了＆＃39; https：＆＃39;时，它确实有效。像这样：

<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Lato:300,400' />

Answer 2

当您使用Google字体中的字体时，根本不需要使用@font-face。如果需要，可以通过类使用这些字体，如下所示：

<强> CSS

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,300italic,400italic&subset=latin,latin-ext);

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-raleway {
    font-family: 'Raleway', sans-serif;
}

<强> HTML

<p class="font-montserrat">This is Montserrat</p>
<p class="font-raleway">This is Raleway</p>

当您在font-family: 'Raleway', sans-serif之后写font-family: 'Montserrat', sans-serif时，它会覆盖蒙特塞拉特与Raleway的字体，这就是为什么代替蒙特塞拉特你会看到Raleway。

Answer 3

正如你们所指出的那样，我发布的代码在Firefox上运行。问题是font-family被另一个css覆盖（仍然不知道为什么这只发生在Firefox ...）。我刚刚创建了这个类：

stdout

刚补充说：

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

现在，每个浏览器都可以正确呈现字体！

谷歌字体没有显示在Firefox中

3 个答案: