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格式）

点击此处查看有关如何实施的更多信息：How to import Google Web Font in CSS file?

编辑** 点击此处查看我所说的工作示例：https://embed.plnkr.co/qfEhb9LCEjh2PHqLlFF5/

Answer 2

尝试使用其他浏览器进行检查，但看起来它可能是 woff2与Firefox 30的兼容性。根据{{3}}，它与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';
}

字体系列无效

2 个答案: