Question

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

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

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

CSS：

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

很棒的字体更难，因为它使用正常字体范围之外的字符，并且不能有简单的单行CSS解决方案。

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

从链接的问题中得到的答案是，您可以使用以下代码检查是否加载了真棒字体：

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无法正常工作的事实。换句话说，被接受的答案只是检查字体真棒css，而不会检查网络字体本身是否由于安全问题而被阻止。

另一个问题的操作说明在评论中阐明了他们提出该问题的原因：

之所以这样做，是因为我正在编写一段js片段，加载到许多不确定的页面中，我不确定它们是否都会很棒的字体，如果没有的话，我要加载它。

我的问题是浏览器阻止了网络字体，我希望标题足够清晰，可以被认为是一个分离的问题。 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。

Answer 2

您可以在页面上使用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”

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

2 个答案: