javascript - 如何检查客户端浏览器是否阻止了 font awesome？

Question

首先，这里有一个非常相似的问题:
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 是否在各个客户端的浏览器中实际工作。

链接问题的答案说您可以使用以下代码检查是否加载了很棒的字体:

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 是否存在，而不检查网络字体本身是否因安全问题而被阻止。

另一个问题的 OP 在评论中阐明了他们问这个问题的原因:

I'm doing it because I'm writing a snippet of js that is going to be loaded in many different pages that I'm not sure are all gonna have font-awesome, if they don't I'm going to load it.

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

重复问题解释:

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

编辑，进一步阅读:

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

Answer 1

您正在使用的解决方案将不起作用，因为 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);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

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