图标字体的CSS字体族降级备选方案？

Question

我的集成开发环境检查我的CSS文件，如果我添加了没有通用回退的font-family规则，就会抱怨。总的来说，我同意我的IDE的观点，我很乐意添加字体回退。

例如：

.selector {
  font-family: Arial;  /* IDE complains. */
  font-family: Arial, sans-serif;  /* IDE is happy. */
}

然而，有时候字体家族是一个图标字体（我认为fontawesome是其中之一），回退并没有太多意义。或者呢？

.my-icon {
  font-family: 'my-icon-font';  /* IDE complains. */
  font-family: 'my-icon-font', serif;  /* IDE is happy, but it does not make sense. */
}

问题

在使用图标字体的font-family规则中，是否存在任何合理的回退方案？

附加动机

就我而言，主要是我的IDE提示我添加一个通用字体回调。作为最后的手段，我可以禁用、抑制或忽略此检查。

然而，在其他团队中，可能有严格的代码约定规则，甚至会阻止提交不符合规范的代码。

或者，如果我是代码检查工具的作者，或者正在定义项目中要使用的编码规范，那么我肯定想知道什么是“正确”的或最聪明的做法 :)

- donquixote

---

请查看W3C规范中关于字体回退的内容。在我看来，你遇到了一个IDE开发者的逻辑错误。你尝试过两次添加相同的字体名称吗？不是要聪明，但是谁才是主宰，你还是IDE？ - Rene van der Lende

为公平起见，对于常规字体，将字体回退是一种良好的实践。IDE如何区分图标字体和常规字体？当然，检查是可选的，它可以被全局禁用，或者可以通过具有IDE特定注释的单个实例来抑制（在公共代码中看起来确实格格不入）。 - donquixote

更简单的逻辑：如果你没有“备用”的内容可提供，那么就不会有要添加的“备用”内容。缺失图标：浏览器会显示一个带有缺失字符十六进制代码的小方块。这种行为早已被实现了很久，可能是自1653年以来。 - Rene van der Lende

IDE的检查并不总是关于什么是技术上强制性的，而是建议性的。我的IDE（PhpStorm）在“可能有错误”下显示了“缺少通用字体名称”的警告，这意味着“可能出错”，但并不是“绝对出错”。从这个交互中，我得出的结论是，图标字体确实是不需要或没有用处的字体回退的一个例子，因此我应该忽略IDE的警告或完全禁用检查。 - donquixote

也许一个好的解决方案是使用一种字体来显示“回退图标”，例如一个图形化的问号。我不认为这样的字体存在或者在任何系统中默认可用，但如果有的话，那将是正确的答案。 - donquixote

Answer 1

正如评论中所讨论的那样，这是一个虚假警告。

正如您自己指出的那样，没有通用字体族适合作为图标字体的备用字体 - 也不可能有，因为图标字体没有标准化。

相关规范（CSS Fonts Module Level 3）只列出以下通用字体族：

• 衬线字体
• 无衬线字体
• 草书字体
• 幻想字体
• 等宽字体

这些都不适合 - 因为它们明确不是为图标/图片字体而设计的。

因此，您应该找到一种方法来抑制这个警告。理想情况下，系统会允许您添加一个应该抑制警告的字体列表（例如图标字体）。否则，您只能完全抑制警告。

---

顺便提一下：只有在您想使用用户计算机上安装的字体（例如标准Windows字体如Arial）时，回退字体才是真正必要的。在这种情况下，您需要一个回退，因为您无法确定用户安装了什么。

如果您使用浏览器可以下载的网络字体，则永远不需要回退字体。如果字体下载失败，包含回退字体仍然很好，但在我看来并不是那么重要。

- sleske

Answer 2

@mtonev

表情符号 - 专门设计用于呈现表情符号的字体。 https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

“其他选项”也不适用。尽管表情符号和图标看起来很相似，但表情符号具有Unicode表示，而图标字体只是一组图像。

了解更多信息：https://www.sitepoint.com/icon-fonts-vs-svg-debate/

- Rychart Redwerkz

---

你在引用谁或什么？“其他选项”是什么？你的解决方案是什么？请查看[ask]并参观[tour]。 - isherwood

Answer 3

您可以添加“fantasy”：

.my-icon {
  font-family: 'my-icon-font', fantasy;
}

- mtonev

---

有趣，但为什么？ - donquixote

因为对我来说这是最好的有效选项。另一个选项可能是“表情符号”。https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family - mtonev

抱歉，但那是完全错误的。CSS规范明确指出，“fantasy”字体适用于“包含字符装饰或表现的装饰性或表现性字体”，并且“这不包括不代表实际字符的 Pi 或 Picture 字体。” 对于图标字体，没有合适的备选方案。 - sleske

@mtonev，你的理由应该在你的回答中，而不是在评论中。 - isherwood