字体在IE浏览器上不工作 [英] Font face is not working on IE browser

问题描述

我在jquery弹出窗口中应用了字体。

  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）格式（woff），
 url（https://www.example.com/font/PTS55F.ttf）格式（truetype），
 url（https://www.example.com/font/PTS55F.svg ）format（svg）; 
} 
 
在.htaccess中添加的代码
 ---------------------- 
 
＃BEGIN需要WEBFONTS 
 
 AddType字体/ ttf .ttf 
 AddType字体/ eot .eot 
 AddType字体/ otf .otf 
 AddType字体/ woff。 woff 
 
< FilesMatch\。（ttf | otf | eot | woff）$> 
< IfModule mod_headers.c> 
标题集Access-Control-Allow-Origin*
< / IfModule> 
< / FilesMatch> 
 
＃需要WEBFONTS的$ end 
  

在页面上工作，但当我尝试相同的弹出字体面不工作。

请帮助我。

解决方案

这是旧的IE错误;）

Bulletproof @ 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'）; 
} 
  

什么？我不知道。

使这个工作的hack技巧是跟随EOT文件名的？。 。

> 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未加载HTTPS


• IE9阻止下载跨原始网络字体


• 在IE9中使Adobe字体与CSS3 @ font-face一起使用

他们几乎没有可能的解决方案。祝你好运！

I have applied font face on a jquery popup. It's working on Chrome and Firefox but not working on IE browsers.

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

By adding above code Font-face is working on page but when I try the same on popup font face doesn't work.

Please help me on this.

解决方案

That´s the old IE bug ;)

Bulletproof @font-face syntax:

@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');
    }

What? I don't get it.

The hack trick that makes this work is the ? following the EOT filename. Seriously.

Browser compatibility

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

---

EDIT: Seems like you are in trouble man, I was digging on similar questions, and seems like IE cannot use an @fontface font hosted outside the site's domain (If the page is at http://www.mysite.com/page - font must also be in the http://www.mysite.com) for one reason or another. Put the EOT file on your domain and try again maybe.

This similar questions also would help:

• @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

They few possible solutions to the problem. Good luck!

这篇关于字体在IE浏览器上不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！