在Firefox(Windows 7)中,从“ 真棒字体”包中调用的图标和字形无法正确呈现。可汗学院网站上提供了一个示例。视频下方的图标显示为带有十六进制代码的框。这意味着它不会被Firefox下载。
它在Chrome(Windows 7),Safari(Mac OS X)和不锈钢(Mac OS X)上的显示方式:
我在Stack Overflow上发现了这个问题,可以解释为什么会发生这种情况-CSS确实使用单引号将字体的src位置括起来。但是,我对Khan Academy服务器没有写权限,因此无法修改实际的网站。我想知道这是否可以在Firefox中修复,以及如何解决。如果可以的话,我可以运行Greasemonkey脚本。我已经尝试过手动下载字体并将其添加到Windows的“字体”文件夹中,但这无济于事。
作为参考,设置此字体的CSS(Firefox无法正确处理)是:
@font-face
{
font-family:'FontAwesome';
src:url('./fontawesome-webfont.eot');
src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./fontawesome-webfont.woff') format('woff'),
url('./fontawesome-webfont.ttf') format('truetype'),
url('./fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight:normal;
font-style:normal
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
text-decoration:inherit
}
更新:我发现Firefox在Font Awesome软件包的网站(上面链接)中正确显示了基于字体的图标。通过检查CSS并将其与Khan Academy的CSS进行比较,我发现这两个代码完全相同,除了 KA的CSS的最后一个属性后面没有分号(如果忽略了压缩的事实)。缺少分号是否会导致此问题?
./
正如我所解释的,这显然是Firefox的路径问题,这迫使KA将字体文件移动到不需要的新位置./
,从而使Firefox也可以正确读取字体文件。因此,这是 Firefox如何处理文件的问题。你错了。