字体系列不起作用答案

【问题标题】：Font Family not working字体系列不起作用
【发布时间】：2017-05-08 16:41:42
【问题描述】：

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

有什么想法可能是错的吗？

【问题讨论】：

你能在 Chrome 开发工具的 Sources 标签中看到 webfont 加载吗？
你试过其他浏览器吗？
它看起来不像是在导入。我使用了 Mozilla Firefox 调试器，它显示了所有各种文件的加载。当我点击“字体”时，它没有显示任何加载。我想这可以隔离问题。知道如何调试吗？
注意：在调试器的样式部分下，这部分 css（声明字体）会加载。所以它加载了style 语句，但不知何故仍然没有导入.woff 文件...
也许是 woff2 的兼容性？根据caniuse，它与 Firefox 39+ 兼容

标签： html css fonts webfonts

【解决方案1】：

将 span 更改为应该可以工作的 div： **Internet Explorer 8 及更早版本，不支持 WOFF 格式的@font-face 规则（仅支持 EOT 格式）

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

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

【讨论】：

【解决方案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';
}

【讨论】：

我找到了一个网站，您可以在其中轻松下载各种版本的 Google API 字体，即localfont.com。我搜索了“Arizonia”，它有一个简单的.zip 文件可供下载并完美实现。问题是我需要一个.woff 文件的后备。 Tku！
@WalkerFarrow 自 2020 年 7 月 5 日起，localfont.com 不再工作。你能推荐一个类似的网站吗？