html - Google 字体无法在 FireFox 上呈现

Question

我在我的样式表上使用谷歌字体如下:

@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;
}

可能是什么原因？感谢帮助。

Answer 1

Font Awesome not working in Firefox & IE

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

You need to add a local rule if you want Firefox to use the font when installing on the computer. See https://developer.mozilla.org/Web/CSS/@font-face.

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