字体系列不工作

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

将 span 更改为 divs 它应该可以工作： **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 的兼容性。根据 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';
}

字体系列不工作

Font Family not working

html

css

fonts

webfonts