如何检查字体真棒是否被客户端浏览器阻止？答案

【问题标题】：How can I check if font awesome is blocked from a client's browser?如何检查字体真棒是否被客户端浏览器阻止？
【发布时间】：2019-07-01 20:50:22
【问题描述】：

首先这里有一个非常相似的问题：
How to check if Font Awesome is loaded in web page with javascript?

我将尝试解释为什么我的问题不同。

我发现浏览器通常已经开始阻止网络字体，这需要后备解决方案。使用普通字符范围字体，这很容易：

CSS：

font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;

Font awesome 然而更难，因为它使用了正常字体范围之外的字符，并且不能有一个简单的单行 css 解决方案。

有几个可用的选项，包括使用图像，或者在某些情况下来自其他字体的字符，类似于图标，但所有方法都需要在单个客户端的浏览器中检查 font awesome 是否真的有效。

链接问题的答案说，您可以使用以下代码检查是否加载了 font awesome：

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);
};

但是，我的本地回退从未执行，因为 css(span, 'font-family') 实际上返回了 FontAwesome。我相信这是因为 css 文件导入没有问题，并且 css 说字体系列应该是 FontAwesome。事实仍然是 FontAwesome 不起作用。换句话说，接受的答案只是检查 font awesome css 是否存在，而不是 web 字体本身是否因安全问题而被阻止。

另一个问题的 OP 在 cmets 中阐明了他们问这个问题的原因：

我这样做是因为我正在编写一个 js 的 sn-p 加载在许多不同的页面中，我不确定它们都会有字体太棒了，如果他们不这样做，我会加载它。

我的问题是浏览器阻止了网络字体，我希望标题足够清晰，可以被视为一个单独的不同问题。问题存在于 Windows 10 和 IE11 的组合设置中。我已经用尽了我的选择，只是关闭了阻止字体的安全设置。

重复的问题解释：

这个问题根本不是suggested question 的重复。这与资源是否已加载无关。资源的加载工作得很好。主机未被阻止。 webapps的渲染和显示是问题，在原始问题中也有解释，但现在再次提到，因为有人建议关闭为副本。

编辑，进一步阅读：

我关闭阻止网络字体的设置的努力是explained here

【问题讨论】：

这不是一个解决方案，而是更多可能有帮助的信息（并且确实会根据您的用例提供一些解决方案）stackoverflow.com/questions/31745307/…
你不能对 font-awesome 进行 axios 调用，看看你得到了什么响应代码吗？
How to detect when one or more JS/CSS library fail to load (e.g. CDN)?的可能重复
@imvain2 谢谢你的链接。我已经读过了。当我写到我已经用尽我的选择来简单地关闭安全设置时，我真的不是在开玩笑。不幸的是，在这种情况下，编辑安全选项不是一个选项。不过还是谢谢:)
@HereticMonkey，这不是同一个问题。如果您看到 drkunibar 的答案以及我对它的回复，您会看到资源加载得很好。我在最初的问题中也提到了这一点。阻塞发生在不同的级别，我无法准确识别如何以及如何以编程方式检测它。现在我只能在加载页面时直观地看到它。

标签： javascript css font-awesome webfonts

【解决方案1】：

您可以在您的页面上使用onload 和onerror 事件

示例

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
      onload="alert('everythings looks fine')" 
      onerror="alert('error while loading fontawesome');">

在事件中你可以设置一个全局变量。

更新

如果您想知道字体是否有效，可以检查是否使用了该字体：

<html>
  <head>
    <link rel="stylesheet"
          href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"/>
    <script>
      function check(){
        console.log(window.getComputedStyle(document.getElementById('foo')).getPropertyValue("font-family"));
      }
    </script>
  </head>
  <body onload="check();"/>
     <span id="foo" class="fa"></span>
  </body>
</html>

在此示例中，如果 Font Awesone 正常工作，您会在控制台中看到“Font Awesome 5 Free”

【讨论】：

感谢您的回答，但 css 可以很好地加载到浏览器中，但随后被阻止。无论如何我都试过了，只是为了确定，但正如我所料，它只是提醒“一切看起来都很好”，并且字体真棒仍然被阻止。同样，被阻止的不是资源，而是网络字体。
被什么阻止了？浏览器插件？
老实说，我不知道具体是什么，但微软似乎“新的和改进的”安全设置。
我已经更新了我的示例。通过更新，您可以检查 Font Awesome 是否有效。我无法重现你的行为，但我希望更新对你有用
您的示例与我的问题中已经存在的示例几乎相同，不幸的是，它不起作用。再次感谢您的尝试，但这次我没有得到任何帮助。

【解决方案2】：

您使用的解决方案将不起作用，因为window.getComputedStyle 不会告诉您渲染的字体，而是样式表中定义的字体、加载或其他方式 (ref)。您可以使用启发式方法：

window.onload = function() {
  var fas = document.createElement("span");
  fas.className = "fas fa-ambulance";
  fas.style.position = "absolute";
  fas.style.left = 0;
  fas.style.top = 0;
  fas.style.visibility = "hidden";
  document.body.appendChild(fas);
  window.setTimeout(function() {
    var widthBefore = fas.offsetWidth;
    fas.style.fontFamily = "asdf";
    var widthAfter = fas.offsetWidth;
    if (widthBefore === widthAfter) {
      console.log("Font Awesome Blocked");
    } else {
      console.log("Font Awesome Loaded");
    }
    document.body.removeChild(fas);
  }, 2000);
}

&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"&gt;

上面创建了一个使用 Font Awesome 的元素，并将其宽度与强制使用后备字体的元素进行比较。宽度比较将告诉您浏览器是否也为 Font Awesome 使用了备用字体。

【讨论】：

是的！这行得通。我不得不将类名 fas` 更改为 fa 以使其与我的字体真棒版本 4.7 一起使用。我在阻塞和非阻塞模式下测试了代码，它工作正常！谢谢！