字體家族不起作用

Question

我在內部網頁上使用了Google字體，但由於某種原因它沒有被捕獲。

我下載了.woff2文件，並將其托管在我的服務器上。

我包括了@font-face ，這是我寫的方式：

@font-face {
  font-family: 'Arizonia';
  font-style: normal;
  font-weight: 400;
  src: local('Arizonia'), local('Arizonia-Regular'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.arizonia {
    font-family: 'Arizonia';
}

然后，在HTML文檔的后面，我有如下標記：

<span class="arizonia">Some Text</span>但文本顯示為Times New Roman（瀏覽器的默認值...）。 它不知何故沒有加載字體。

我檢查了該文件，它可以訪問-表示.woff2文件的URL有效。

我正在使用Firefox 30.0

任何想法可能有什么問題嗎？

Answer 1

將范圍更改為應該工作的div： ** Internet Explorer 8和更早版本，不支持WOFF格式的@ font-face規則（僅支持EOT格式）

在此處查看有關如何實現的更多信息： 如何在CSS文件中導入Google Web字體？

編輯**在這里查看我所說的工作示例： https : //embed.plnkr.co/qfEhb9LCEjh2PHqLlFF5/

Answer 2

嘗試使用其他瀏覽器進行檢查，但看起來可能與Firefox 30具有woff2兼容性 。 根據caniuse的說法，它與Firefox 39版本兼容。 還包括woff。 所以像這樣：

@font-face {
  font-family: 'Arizonia';
  font-style: normal;
  font-weight: 400;
  src: local('Arizonia'), local('Arizonia-Regular'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(/lib/fonts/Arizonia/PwrsyFTYH2Wmsvpn0dx4s_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.arizonia {
    font-family: 'Arizonia';
}