Google 字体无法在 FireFox 上呈现答案

【问题标题】：Google Fonts not rendering on FireFoxGoogle 字体无法在 FireFox 上呈现
【发布时间】：2017-10-20 09:36:21
【问题描述】：

我在样式表上使用谷歌字体，如下所示：

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Oswald');

.font1{
    font-family: 'Roboto', sans-serif !important;
}

.font2{
    font-family: 'Oswald', sans-serif !important;
}

在我的html中

<p class="font1">Some text here</p>

文本在 Chrome 和 IE 上以正确的字体呈现，无法在 Firefox 上呈现。我检查了 Firefox 上 DOM Inspector 的字体部分，它正确显示如下

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url("https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2") format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

可能是什么原因？帮助表示赞赏。

【问题讨论】：

标签： html css firefox fonts

【解决方案1】：

Font Awesome not working in Firefox & IE

查看上述问题。似乎有针对此问题的有效修复程序。

如果您希望 Firefox 在计算机上安装时使用该字体，则需要添加本地规则。见https://developer.mozilla.org/Web/CSS/@font-face。

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }

【讨论】：

我没有尝试使用本地安装的字体。我尝试过的任何方法 font-face { font-family: 'Roboto'; src：本地（“机器人”）； } 和 font-face { font-family: 'Roboto'; src: url('fonts.googleapis.com/css?family=Roboto'); } 两者都不起作用
有趣的是，如果您访问 Google Fonts 网站，字体会正确呈现，所以我确信在我的 css 上使用字体时我做错了什么