javascript 如果字体下载被阻止，则从 FontAwesome 回退
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23653708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fallback from FontAwesome if font download blocked
提问by John U
I'm developing a web page and found FontAwesomeas a pretty neat way to add nice icons to things, however by default font downloads are blocked by the NoScript pluginfor Firefox.
我正在开发一个网页，发现FontAwesome是一种为事物添加漂亮图标的非常简洁的方式，但是默认情况下字体下载被Firefox的NoScript 插件阻止。
This would not be an issue for normal fonts, but FontAwesome uses unicode characters which are deliberately outside the usual printable range of most fonts, so adding a font stack to the CSS (EG: font-family: FontAwesome, sans-serif;) will not work as all the icons just render as hex-squares.
这对于普通字体来说不是问题，但 FontAwesome 使用 unicode 字符，这些字符故意超出大多数字体的通常可打印范围，因此向 CSS (EG:) 添加字体堆栈font-family: FontAwesome, sans-serif;将不起作用，因为所有图标都仅呈现为十六进制-正方形。
I realise I can tweak NoScript to allow font downloads, but that is not the ideal solution for all users - I would rather the page degrade gracefully.
我意识到我可以调整 NoScript 以允许字体下载，但这并不是所有用户的理想解决方案 - 我宁愿页面优雅地降级。
Of course, it would be easy to do this with Javascript/jQuery, but of course if it's NoScriptthat's doing the blocking that's no help either, and it fails the test if the user doesn't have javascript enabled.
当然，使用 Javascript/jQuery 可以很容易地做到这一点，但是当然，如果NoScript正在执行阻塞，那也没有帮助，如果用户没有启用 javascript，它就会失败测试。
What would be ideal would be to have some CSS style/rule that acts as the fallback for any FontAwesome objects, replacing them with some basic character or even just not displaying anything.
理想的情况是拥有一些 CSS 样式/规则作为任何 FontAwesome 对象的后备，用一些基本字符替换它们，甚至不显示任何内容。
For those unfamiliar with FontAwesome / TL;DR:
对于那些不熟悉 FontAwesome / TL;DR 的人：
All FontAwesome icons have the CSS class "fa":
所有 FontAwesome 图标都有 CSS 类“fa”：
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
FontAwesome loads the custom font like this (I removed
FontAwesome 像这样加载自定义字体（我删除了
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}
And then a particular FontAwesome icon will have its own specific class that inserts the relevant unicode character, for example:
然后一个特定的 FontAwesome 图标将有自己的特定类，用于插入相关的 unicode 字符，例如：
.fa-star:before {
content: "?";
}
The HTML for the icon will look like this:
图标的 HTML 如下所示：
<i class="fa fa-star"></i>
So the problem here is:We need some way, preferably in CSS, to replace, remove, or hide the content of items with the CSS class "fa" if the typeface "FontAwesome" is NOT loaded.
所以这里的问题是：如果没有加载字体“FontAwesome”，我们需要一些方法，最好是在 CSS 中，用 CSS 类“fa”替换、删除或隐藏项目的内容。
采纳答案by John U
Well, I thinkI solved this thanks to you guys leading me in the right direction:
好吧，我想我解决了这个问题，感谢你们带领我走向正确的方向：
In the head, I put this:
在头脑中，我把这个：
<noscript>
<style>
[class*="fa-"]:before
{
content:"+";
}
</style>
</noscript>
This selects each fa-icon class item, which are all defined in the pattern:
这将选择每个 fa-icon 类项，它们都在模式中定义：
.fa-heart:before {
content: "\f004";
}
And replaces the content with a generic character, or indeed anything else we might care to insert (including nothing).
并用通用字符替换内容，或者实际上是我们可能想要插入的任何其他内容（包括无内容）。
Does this seem reasonable or is there some terrible side-effect I've missed here?
这看起来合理还是我在这里错过了一些可怕的副作用？
I realise there is a remote possibility that someone has font-loading blocked but javascript enabled, but for now I'm happy to ignore that customer demographic ;)
我意识到有人阻止字体加载但启用了 javascript 的可能性很小，但现在我很高兴忽略该客户人口统计数据；)
Edit to add:
编辑添加：
After all this time this answer is still getting votes (thanks!), clearly it's still an issue, so I thought I'd post this link about greatly improving (and trimming) FontAwesome in a variety of ways: FontAwesome Fixed
毕竟这个答案仍然得到投票（谢谢！），显然它仍然是一个问题，所以我想我会发布这个关于以各种方式大大改进（和修剪）FontAwesome的链接： FontAwesome Fixed
My favourite is actually embedding selected icons as inline Base64 coded SVG, either in the HTML or your CSS. This seems pretty elegant and efficient, especially if you only need a couple of icons out of the set. FA still feels like a fudge to me.
我最喜欢的是在 HTML 或 CSS 中嵌入选定的图标作为内联 Base64 编码的 SVG。这看起来非常优雅和高效，特别是如果你只需要几个图标。FA 对我来说仍然是一种软糖。
回答by BenM
One way to work around this would be to pull in another CSS file for <noscript>users, and override the .fa-*classes for images or sprites.
解决此问题的一种方法是为<noscript>用户引入另一个 CSS 文件，并覆盖.fa-*图像或精灵的类。
For example:
例如：
<noscript>
<link rel="stylesheet" type="text/css" href="safe-icons.css" />
</noscript>
Your safe-icons.cssfile might look something like this:
您的safe-icons.css文件可能如下所示：
.fa {
display: inline-block;
overflow: hidden;
color: transparent;
font-family: sans-serif;
width: 16px;
height: 16px;
background-position: center center;
background-repeat: no-repeat;
}
.fa-star { background-image: url('star.png'); }
Of course, you'll have the issue of dealing with icons pulled in from FontAwesome that have different sizes, but this will certainly strike a balance, and render at least something to users with NoScript enabled.
当然，您会遇到处理从 FontAwesome 中提取的大小不同的图标的问题，但这肯定会取得平衡，并至少向启用 NoScript 的用户呈现一些内容。
回答by Seth Petry-Johnson
I recently ran into problems where JS is enabled, but users are on a secured network that blocks either all web fonts, or FA specifically.
我最近遇到了启用 JS 的问题，但用户在一个安全的网络上，该网络阻止了所有网络字体，或专门阻止了 FA。
To fix it, I used something similar to this:
为了解决这个问题，我使用了类似的东西来此：
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);
};
Basically, it's a bit of jQuery that creates a FA element on the page and checks to see if the font was loaded correctly. If not, you can implement a fallback. In my case, the fallback was to insert an <img>tag with a generic placeholder graphic.
基本上，它是在页面上创建一个 FA 元素并检查字体是否正确加载的一点 jQuery。如果没有，您可以实施回退。就我而言，后备方案是插入<img>带有通用占位符图形的标签。
It's not pure CSS, but it (1) allows for more powerful fallback measures, and (2) covers more scenarios than just <noscript>
它不是纯 CSS，但它 (1) 允许更强大的回退措施，并且 (2) 涵盖的场景不仅仅是 <noscript>
