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

Question

首先,这里有一个非常相似的问题:
如何使用javascript检查是否在网页中加载了Font Awesome？

我会试着解释为什么我的问题不同.

我发现浏览器已经开始阻止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,而不是因为安全问题而阻止了Web字体本身.

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

我这样做是因为我正在编写一段js,这些js将被加载到许多不同的页面中,我不确定它们是否会有字体 - 如果它们不是我将要加载它.

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

重复的问题解释:

问题根本不是建议问题的重复.这与资源是否加载无关.资源的加载工作正常.主机未被阻止.webapps的呈现和显示是问题,这也在原始问题中解释,但现在再次提到,因为有人建议关闭作为副本.

编辑,进一步阅读:

我在此处解释了关闭阻止Web字体的设置的努力

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 的后备字体。