IE和Font Awesome [英] IE and Font Awesome

问题描述

我在我的网站上使用了Font Awesome图标，这些图标在Chrome，Firefox，Edge等设备中均能正常显示，但在任何版本的IE中都不会显示，甚至在方形框中也不会显示. 显然，我以为我的网站出现了问题，直到我使用IE浏览到Font Awesome网站，并注意到那里也没有显示任何图标. F12控制台显示此错误消息 CSS3111:@ font-face遇到未知错误.

Chrome，Firefox屏幕截图

IE屏幕快照

我据此推断出IE中必须调整一个本地设置，屏幕截图已关闭兼容性视图. 任何意见表示赞赏.

解决方案

可能已禁用可下载字体. DISA STIG DTBI030-IE11.

尝试使用基于base 64和CSS的解决方案强制字体通过.

这是可以修复的.您只需要 Base64 字体并将其包含在CSS文件中即可.一旦包含对新FontAwesomeB64.css的调用，请确保删除对可下载WOFF文件的调用.

使用 https://www.base64encode.org/对WOFF Font-Awesome字体文件进行编码

编辑生成的文件并添加这些行.当您到达src:url行时，请确保将其正确地输入到您收到的base64信息中(不要使用此处显示的大于和小于符号.)在该base64信息的末尾添加单引号，括号，分号和大括号括起来:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

您现在有了Font-Awesome字体的base64 CSS文件，该文件绕过了浏览器中的所有字体下载拒绝设置.

我发现它适用于所有字体，下载量稍大，但值得保证.

I'm using Font Awesome icons on my website which display fine in Chrome, Firefox, Edge etc but don't show in any version of IE, not even the square boxes. I obviously thought I had an issue with my site until I went over to the Font Awesome website using IE and noticed no icons displaying there either. The F12 console displayed this error message CSS3111: @font-face encountered unknown error.

Chrome, Firefox screenshot

IE screenshot

I'm deducing from this that there has to be a local setting in IE which I need to adjust, screenshot was taking with compatibility view off. Any views appreciated.

解决方案

Disablement of downloadable fonts has probably been implemented. DISA STIG DTBI030-IE11.

Try this solution that uses base 64 and CSS to force the fonts through.

This is fixable. You just need to Base64 the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

Use https://www.base64encode.org/ to encode the WOFF Font-Awesome font file.

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.

这篇关于IE和Font Awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！