Despite functioning seamlessly in IE8 and other browsers, @font-face encounters display difficulties in IE9. This problem arises specifically on the live site, whereas local viewing on the user's computer does not present any issues.
The CSS code in question is:
@font-face { font-family: 'LeagueGothicRegular'; src: url('league_gothic_0-webfont.eot'); src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal; }
A similar problem has been reported, with the font functioning in all IE versions except IE9. However, changing the Document Mode (via the F12 developer tools) resolves the issue, albeit not ideally.
Update:
Investigation has revealed that IE9 utilizes the .woff font variation instead of the intended .eot version. By including the complete font variations generated by the fontsquirrel @font-face generator and using the smileyface-local technique, the issue has been resolved:
@font-face { font-family: "LucidaFax-bold"; src: url("_font/LucidaFax-bold.eot"); src: local("☺"), url("_font/LucidaFax-bold.woff") format("woff"), url("_font/LucidaFax-bold.ttf") format("truetype"), url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg"); } h1 { font-family: "LucidaFax-bold", serif;}
Additionally, the Mark "Tarquin" Wilton-Jones text-shadow hack has been employed to achieve consistent visual styling across IE versions.
Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.
Copyright© 2022 湘ICP备2022001581号-3