Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 8', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 202 HTML5 CSS3 for the Real World Adding these extra font formats ensures support for every browser but unfortunately it will cause problems in versions of IE older than IE9. Those browsers will see everything between the first url and the last as one URL so will fail to load the font. At first it would seem that we ve been given the choice between supporting IE and supporting every other browser but fortunately there s a solution. Detailed in a FontSpring blog post 4 it involves adding a query string to the end of the EOT URL. This tricks the browser into thinking that the rest of the src property is a continuation of that query string so it goes looking for the correct URL and loads the font excerpt @font-face font-family LeagueGothicRegular src url . fonts iefix format eot url . fonts format woff url . fonts format truetype url . fonts webfontFHzvtkso format svg This syntax has one potential point of failure IE9 has a feature called compatibility mode in which it will attempt to render pages the same way IE7 or 8 would. This was introduced to prevent older sites appearing broken in IE9 s more standards-compliant rendering. However IE9 in compatibility mode doesn t reproduce the bug in loading the EOT font so the above declaration will fail. To compensate for this you can add an additional EOT URL in a separate src property excerpt @font-face font-family LeagueGothicRegular src url . fonts src url . fonts iefix format eot url . fonts format woff url . fonts format truetype 4 http blog the-new-bulletproof-font-face-syntax Embedded Fonts and Multicolumn Layouts 203 url . fonts webfontFHzvtkso format svg This may be an unnecessary precaution as generally a user would need to deliberately switch IE to compatibility .
