如何检查客户端浏览器是否阻止了 font awesome?
How can I check if font awesome is blocked from a client's browser?
首先,这里有一个非常相似的问题:
我将尝试解释为什么我的问题不同。
我发现浏览器已经开始普遍屏蔽网络字体,这需要回退解决方案。使用普通 character-range 字体,这很容易:
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')
事实上 return FontAwesome 所做的那样。我相信这是因为 css 文件导入没有问题,并且 css 表示字体系列应该是 FontAwesome。事实仍然是 FontAwesome 无法正常工作。换句话说,接受的答案只检查真棒字体 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 的组合设置中。我已经用尽所有选项来简单地关闭阻止字体的安全设置。
重复问题解释:
这个问题根本不是 的重复问题。这与资源是否加载无关。资源的加载工作得很好。主机未被阻止。 Web 应用程序的渲染和显示是问题所在,这在原始问题中也有解释,但现在再次提到,因为有人建议将其作为副本关闭。
编辑,进一步阅读:
我努力关闭阻止网络字体的设置
在您的页面上,您可以使用 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'
您正在使用的解决方案将不起作用,因为 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 的后备字体。
首先,这里有一个非常相似的问题:
我将尝试解释为什么我的问题不同。
我发现浏览器已经开始普遍屏蔽网络字体,这需要回退解决方案。使用普通 character-range 字体,这很容易:
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')
事实上 return FontAwesome 所做的那样。我相信这是因为 css 文件导入没有问题,并且 css 表示字体系列应该是 FontAwesome。事实仍然是 FontAwesome 无法正常工作。换句话说,接受的答案只检查真棒字体 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 的组合设置中。我已经用尽所有选项来简单地关闭阻止字体的安全设置。
重复问题解释:
这个问题根本不是
编辑,进一步阅读:
我努力关闭阻止网络字体的设置
在您的页面上,您可以使用 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'
您正在使用的解决方案将不起作用,因为 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 的后备字体。