问题
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.
回答1:
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.
回答2:
This issue is likely related to IE 11: error CSS3111 in my own code, and google.com/fonts doesn't render any fonts
来源：https://stackoverflow.com/questions/33608481/ie-and-font-awesome