代码之家 › 专栏 › 技术社区 › jumps4fun

如何检查客户端浏览器是否阻止了字体Awesome?

webfonts font-awesome css javascript

jumps4fun · 技术社区 · 5 年前

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

我会尽力解释为什么我的问题不同。

我发现浏览器已经开始在一般情况下阻止Web字体,这需要回退解决方案。对于普通的字符范围字体,这很容易:

CSS:

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

然而,字体Awesome更难,因为它使用的字符超出了正常字体范围,并且不能有简单的单行CSS解决方案。

有几个选项可用,包括使用图像,或者在某些情况下使用其他字体的字符,类似于图标,但所有方法都需要一种方法来检查字体Awesome在单个客户端的浏览器中是否实际工作。

链接问题的答案是,您可以使用以下代码检查是否加载了字体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') 确实返回fontawome。我相信这是因为 导入CSS文件没有问题 CSS说字体系列应该是fontawome。事实仍然是,fontawome不起作用。换句话说,接受的答案只是检查字体是否存在令人敬畏的CSS,而不是Web字体本身是否由于安全问题而被阻止。

另一个问题的答案在评论中澄清了他们为什么问这个问题:

我这么做是因为我写了一小段JS 我不确定会有很多不同的页面字体太棒了,如果他们不这样做,我会加载它。

我的问题是浏览器阻止网页字体,我希望标题足够清楚,可以被视为一个独立的不同的问题。该问题存在于Windows10和IE11的组合设置中。我已经用尽了所有的选择,只需关闭阻止字体的安全设置。

重复问题解释:

这个问题根本不是 suggested question . 这与是否加载资源无关。资源装载工作正常。主机未被阻止。WebApps的呈现和显示是问题所在,这在最初的问题中也有解释,但现在又提到了,有人建议将其作为副本关闭。

编辑,进一步阅读:

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

2 回复 | 直到 5 年前

Salman Arshad 5 年前

您使用的解决方案不起作用,因为 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">

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

drkunibar 5 年前

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

在本例中,如果字体awesone有效,您将在控制台中看到“字体awesome 5 free”