如何检查客户端浏览器是否阻止了Font Awesome？

Question

如何检查客户端浏览器是否阻止了Font Awesome？

javascriptcssfont-awesomewebfonts

10

首先，这里有一个非常相似的问题：
如何使用JavaScript检查Web页面是否加载了Font Awesome？

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

我发现浏览器开始封锁网页字体，这需要备选方案。对于普通字符范围字体，这很容易：

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在评论中澄清了他们为什么要问这个问题：

我这么做是因为我写了一小段js代码，将会在很多不确定是否都有font-awesome的页面中加载，如果没有，我就会加载它。

我的问题是浏览器阻止网络字体，并且希望标题足够清楚，可以被认为是一个独立且不同的问题。问题存在于Windows 10和IE11的组合设置中。我已经尽力简单地关闭阻止该字体的安全设置。 重复问题的解释： 这个问题根本不是推荐的问题的重复。这不是关于资源是否加载的问题。资源的加载工作正常。主机没有被阻止。Web应用程序的呈现和显示才是问题，这也在原始问题中解释了，但现在被再次提到，因为有人建议将其关闭为重复项。 编辑，进一步阅读： 我关闭阻止Web字体设置的努力在这里解释。

- jumps4fun

你不能用axios调用font-awesome并查看返回的响应代码吗？ - geoidesic

@imvain2, 感谢你提供的链接。我已经阅读过了。当我写下我已经尽力关闭安全设置时，我并不是在开玩笑。很遗憾，编辑安全选项在这种情况下不是一个选项。但无论如何，还是谢谢你 :) - jumps4fun

@HereticMonkey，这不是同一个问题。如果您看到drkunibar的答案以及我的回应，您会发现资源加载得非常好。我在最初的问题中也提到了这一点。阻塞发生在不同的层面上，我很难确定具体是如何发生的，以及如何通过编程检测它。目前，我只能在加载页面时直观地看到它。 - jumps4fun

@geoidesic，我不知道axios是什么，但它的用途似乎与检查资源的加载有关，而这并不是我面临的问题。浏览器似乎可以很好地加载资源，但加载后却拒绝实际使用它们。这也是为什么这个问题不是其他几个问题的重复原因。尽管如此，我非常感谢所有这些建议。我正在学习很多新东西，即使我还没有找到原始问题的答案。 - jumps4fun

我非常确定在这种情况下，“FontAwesome”实际上是确切的字体名称。 - jumps4fun

显示剩余7条评论

2个回答

0

在您的页面上，您可以使用 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 Awesome正常工作，您将在控制台中看到“Font Awesome 5 Free”。

- drkunibar

谢谢您的回答，但是CSS在浏览器中加载得很好，但随后被阻止了。我还是试了一下，只是为了确保一下，但正如我所预料的那样，它只是简单地弹出“一切看起来都很好”，而Font Awesome仍然被阻止了。因此，问题不在于资源，而在于Web字体被阻止了。 - jumps4fun

被什么阻止了？浏览器插件吗？ - Alnitak

我真的不确定是什么，但似乎是由于微软的“新的和改进的”安全设置。 - jumps4fun

我已经更新了我的示例。通过此次更新，您可以检查Font Awesome是否正常工作。我无法重现您的行为，但我希望这次更新对您有用。 - drkunibar

你的例子与我问题中已有的几乎完全相同，但不幸的是它并没有起作用。再次感谢你的尝试，但这次它并没有帮到我。 - jumps4fun

顺便说一下，我能够在我的电脑上重现这个错误，在IE11中，通过点击进入Internet设置->安全性->用户定义级别->然后选择字体下载“停用”位于选项列表底部。路径文本是手动从丹麦语翻译的，可能与实际的英语文本不同。 - jumps4fun

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Salman A · Accepted Answer

你所使用的解决方案行不通，因为window.getComputedStyle无法告诉你渲染字体的信息，而只能告诉你样式表中定义的字体信息，无论是加载或未加载的(参考)。你可以使用启发式方法：

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。"最初的回答"