如果字体下载被阻止，则从 FontAwesome 回退答案

【问题标题】：Fallback from FontAwesome if font download blocked如果字体下载被阻止，则从 FontAwesome 回退
【发布时间】：2014-07-02 10:51:59
【问题描述】：

我正在开发一个网页，发现 FontAwesome 是一种非常简洁的方式来为事物添加漂亮的图标，但是默认情况下，字体下载会被 Firefox 的 NoScript plugin 阻止。

这对于普通字体来说不是问题，但 FontAwesome 使用的 unicode 字符故意超出了大多数字体的通常可打印范围，因此将字体堆栈添加到 CSS（例如：font-family: FontAwesome, sans-serif;）将无法正常工作图标只是呈现为六角方块。

我意识到我可以调整 NoScript 以允许字体下载，但这并不是所有用户的理想解决方案 - 我宁愿页面优雅地降级。

当然，使用 Javascript/jQuery 很容易做到这一点，但当然，如果是 NoScript 进行阻塞，那也无济于事，而且如果用户不这样做，它就会失败测试没有启用 javascript。

理想的做法是有一些 CSS 样式/规则作为任何 FontAwesome 对象的后备，用一些基本字符替换它们，甚至不显示任何内容。

对于那些不熟悉 FontAwesome / TL;DR 的人：

所有 FontAwesome 图标都有 CSS 类“fa”：

.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

FontAwesome 像这样加载自定义字体（我删除了

@font-face {
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}

然后一个特定的 FontAwesome 图标将有自己的特定类插入相关的 unicode 字符，例如：

.fa-star:before {
    content: "";
}

图标的 HTML 如下所示：

<i class="fa fa-star"></i>

所以这里的问题是： 如果没有加载字体“FontAwesome”，我们需要某种方式，最好是在 CSS 中，以替换、删除或隐藏具有 CSS 类“fa”的项目的内容。

【问题讨论】：

我认为这在 CSS 中是不可能的
你可以有默认字体系列：sans-serif, FontAwesome;当 css 加载并使用 JS 时，您可以将其转换为 font-family: FontAwesome, sans-serif;因此，如果 JS 被阻止，默认字体将起作用。
@Faraz 默认的sans-serif 将如何工作？ FontAwesome 使用特殊的 unicode 字符...
@BenM 这是我的解决方案jsfiddle.net/farazilu/BG5J7
@Faraz 你只会得到一个正方形 > jsfiddle.net/BG5J7/4 如果 FontAwesome 没有加载（即当<noscript> 标签被启用时）。

标签： javascript html css font-awesome

【解决方案1】：

解决此问题的一种方法是为<noscript> 用户提取另一个CSS 文件，并覆盖图像或精灵的.fa-* 类。

例如：

<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>

您的safe-icons.css 文件可能如下所示：

.fa {
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: sans-serif;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.fa-star { background-image: url('star.png'); }

当然，您会遇到处理从 FontAwesome 提取的具有不同大小的图标的问题，但这肯定会取得平衡，并至少为启用 NoScript 的用户呈现一些内容。

【讨论】：

Web 字体现在在某些设置中作为一个整体出现问题。像带有 IE11 的 Windows 10 可能会阻止所有网络字体。这个答案虽然需要做很多工作，但可能是唯一可行的方法。

【解决方案2】：

好吧，我认为我解决了这个问题，感谢你们带领我朝着正确的方向前进：

在头上，我放了这个：

<noscript>
    <style>
        [class*="fa-"]:before
        {
            content:"+";
        }
    </style>
</noscript>

这会选择每个 fa-icon 类项，它们都在模式中定义：

.fa-heart:before {
  content: "\f004";
}

并用通用字符替换内容，或者实际上我们可能希望插入的任何其他内容（包括任何内容）。

这看起来是合理的还是我在这里错过了一些可怕的副作用？

我意识到有人阻止了字体加载但启用了 javascript 的可能性很小，但现在我很高兴忽略该客户人口统计 ;)

编辑添加：

在这么长时间之后，这个答案仍然得到投票（谢谢！），显然它仍然是一个问题，所以我想我会发布这个链接，以各种方式大大改进（和修剪）FontAwesome： FontAwesome Fixed

我最喜欢的实际上是将选定的图标嵌入为内联 Base64 编码的 SVG，无论是在 HTML 还是您的 CSS 中。这看起来非常优雅和高效，特别是如果您只需要几个图标。 FA 对我来说仍然是一种软糖。

【讨论】：

投了反对票，因为这并不能真正回答问题。禁用 JavaScript 和禁用 Web 字体是完全不同的两件事。只有 NoScript 插件可以两者兼得。您可以在所有主要浏览器中禁用 Web 字体（出于各种原因，例如安全性或可访问性）并且仍然启用 JavaScript。在这种情况下应用
这不是故意的 :( 我首先在手机上阅读了这个问题，投了反对票，计划稍后回复，但没有时间再次检查。如果您感到被冒犯，我很抱歉.我一般不喜欢图标字体，因为它们在语义和可访问性方面是一个非常灰色的区域。许多网站过于依赖它们（例如 2014 年 8 月的 GitHub）。禁用 Web 字体后，它们会显示无意义的 Unicode 符号，没有文本或任何其他对它们应该做的事情的后备。检查technotes.iangreenleaf.com/posts/font-awesome-not-awesome.html
我知道 FontAwesome 等人的 hackiness，并且在网页设计中过度依赖 anything 是一个坏主意（事实上，画布指纹识别是一件事告诉您有关网络/浏览器状态的所有信息），但这不是手头的主题。我接受对 FA 的批评是公平的，并且对我的回答（对我自己的问题）的评论是一个有效的观点，尽管在我正在开发的特定情况下我将选择忽略它这不是很相关 - 我怀疑我们的客户会花钱请平面设计师为我们构建一组 SVG 图标。
我实际上会对这个问题是否存在任何（非 JS？）解决方案感兴趣。根据我禁用 Web 字体的经验，它要么是实际文本旁边的无意义的 Unicode 框（还不错），要么是文本旁边的乱码（不好但仍然可用），要么是没有文本的 Unicode/乱码（最坏的情况）。
与此同时，我发现了这个：jasonsantamaria.com/articles/symbolset，我可以确认它似乎有效。在他们的主页 (symbolset.com) 上，导航菜单中有一个购物车图标。如果禁用/覆盖 Web 字体而不显示乱码或时髦的 Unicode 数字，则图标将变为“购物车”。

【解决方案3】：

我最近遇到了启用 JS 的问题，但用户位于一个安全的网络上，该网络阻止了所有 Web 字体，或者特别是 FA。

为了修复它，我使用了类似的 to this:

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

基本上，它是一个在页面上创建 FA 元素并检查字体是否正确加载的 jQuery。如果没有，您可以实施回退。就我而言，后备方案是插入带有通用占位符图形的<img> 标记。

它不是纯 CSS，但它 (1) 允许更强大的后备措施，并且 (2) 涵盖的场景不仅仅是 <noscript>

【讨论】：

【解决方案4】：

我意识到这是一个古老的问题，但我最近来到这里想知道类似的事情。
我自己通过hosting 图标解决了我的问题。

遵循上述托管指南后我自己的 html 示例。

 <head>
    <link rel="stylesheet" href="assets/css/all.css">
 </head>

 <footer>
    <a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
    <a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
 </footer>

【讨论】：