我正在开发一个网页,并发现 FontAwesome 是一种非常好的添加漂亮图标的方法,但是默认情况下Firefox浏览器中的 NoScript插件 会阻止字体下载。
对于普通字体,这不会成为问题,但FontAwesome使用的unicode字符故意位于大多数字体的可打印范围之外,因此向CSS添加字体堆栈(例如: font-family: FontAwesome, sans-serif;
)将不起作用,因为所有图标都只呈现为十六进制方块。
我知道我可以调整NoScript以允许字体下载,但这并不适用于所有用户-我宁愿使页面优雅地降级。
当然,使用Javascript / jQuery很容易实现这一点,但如果是 NoScript 在阻止下载,则无济于事,并且如果用户没有启用javascript,则测试将失败。
理想情况是有一些CSS样式/规则,可以作为任何FontAwesome对象的回退,用基本字符替换它们,甚至什么也不显示。
对于那些不熟悉FontAwesome / TL;DR的人:
所有FontAwesome图标都有CSS类“fa”:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
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");
}
然后特定的FontAwesome图标将有自己特定的类,插入相关的Unicode字符,例如:
.fa-star:before {
content: "";
}
图标的HTML代码如下:
<i class="fa fa-star"></i>
所以这里的问题是: 我们需要一种方式,最好是在CSS中,以替换、删除或隐藏那些带有CSS类名“fa”的内容,如果字体“FontAwesome”没有被加载。
sans-serif
字体将如何工作?FontAwesome使用特殊的Unicode字符... - BenM<noscript>
标签),则您只需获取一个正方形> http://jsfiddle.net/BG5J7/4/。 - BenM