css - 字体在 IE 浏览器上不工作

Question

我在 jquery 弹出窗口上应用了字体。它适用于 Chrome 和 Firefox，但不适用于 IE 浏览器。

Font Face Code in css
----------------------

@font-face {
font-family: "pt-sans";
    src: url("https://www.example.com/font/PTS55F.eot");
    src: local("pt-sans"),
     url("https://www.example.com/font/PTS55F.woff") format("woff"),
     url("https://www.example.com/font/PTS55F.ttf") format("truetype"),
     url("https://www.example.com/font/PTS55F.svg") format("svg"); 
 }

Code added in .htaccess
----------------------

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

# END REQUIRED FOR WEBFONTS

通过添加上面的代码，字体可以在页面上工作，但是当我在弹出窗口上尝试相同的字体时，字体就不起作用了。

请帮我解决这个问题。

Answer 1

那是旧的 IE 错误 ;)

防弹@font-face 语法:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

什么？我不明白。

使这项工作成功的技巧是 EOT 文件名后面的 ?。 认真地。

浏览器兼容性

Safari 5.03、IE 6-9、Firefox 3.6-4、Chrome 8、iOS 3.2-4.2、Android 2.2-2.3、Opera 11

---

编辑: 看来你遇到麻烦了，我正在研究类似的问题，似乎 IE 无法使用网站域外托管的@fontface 字体(如果页面位于 http://www.mysite.com/page -出于某种原因，字体也必须在 http://www.mysite.com 中)。将 EOT 文件放在您的域中，然后再试一次。

类似的问题也会有所帮助:

• @font-face EOT not loading over HTTPS
• IE9 blocks download of cross-origin web font
• Make Adobe fonts work with CSS3 @font-face in IE9

他们很少有可能解决问题。祝你好运!