字体家族不起作用

debugcn 发表于 Dev

沃克·法罗（Walker Farrow）

我在内部网页上使用了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

任何想法可能有什么问题吗？

阿尔瓦罗

尝试使用其他浏览器进行检查，但看起来可能与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';
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。