Question

我在jquery弹出窗口中应用了font face。它适用于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

通过添加上面的代码，Font-face正在页面上工作，但是当我在弹出字体表面上尝试相同时，它不起作用。

请帮我解决这个问题。

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字体（如果网页位于{{由于某种原因，3}} - font也必须在http://www.mysite.com/page中。将EOT文件放在您的域上，然后重试。

这些类似的问题也会有所帮助：

http://www.mysite.com

@font-face EOT not loading over HTTPS

IE9 blocks download of cross-origin web font

他们几乎没有解决问题的方法。祝你好运！

Answer 2

在css中尝试使用此字体代码：

@font-face{
font-family:'pt-sans';
src:url('https://www.mysite.com/font/PTS55F.eot'); // IE9 Compat Modes
src:url('https://www.mysite.com/font/PTS55F.eot?#iefix') format('embedded-opentype'), // IE6-IE8
url('https://www.mysite.com/font/PTS55F.woff') format('woff'), // Modern Browsers
url('https://www.mysite.com/font/PTS55F.ttf') format('truetype'), // Safari, Android, iOS
url('https://www.mysite.com/font/PTS55F.svg#pt-sans') format('svg');  // Legacy iOS
font-weight:normal;
font-style:normal
}

或者您可以上传字体：http://www.fontsquirrel.com/fontface/generator并获取font-face kit和css，这也适用于所有浏览器。

Answer 3

这是我使用的代码。但我从来不需要任何htaccess代码。没问题。

@font-face 
{    
    font-family: 'Robotothin';

    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#Robotothin') format('svg');

}

Answer 4

这是一个老问题，但我觉得如果我现在回答这个问题最好，因为即使应用了所有可能的解决方案，我也遇到了与IE相同的问题。我假设这里有问题的网站是在本地服务器上托管的，这基本上是IE的问题。我花了一段时间才意识到，但我注意到我的实时网站有工作字体，而我的本地版本没有。默认情况下，IE通常有一个设置应用于在本地托管网站（Intranet）的浏览器中显示兼容性视图模式，这意味着某些样式可能无法按预期正常工作，并且导入的字体通常也无法正常工作。

要禁用此设置，请单击右上角的＆gt;中的cog / gear图标进入IE菜单。兼容性视图设置，然后取消选中＆＃34;在兼容性视图中显示Intranet站点。这应该可以解决未来访问者的问题，我使用的是IE11，但这种情况仍然存在，所以未来几年它可能会相同，因为IE现在也只是获得了无限制的标签。

Answer 5

此人/论坛的致谢： http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

我遇到与IE11 相同的问题，请在我的网站上使用字体levenim。标题更正，应有的一切。当我使用CDN或子域时，它不会加载，当它在同一个域上时，它会完全加载。问题是什么？ THE FILENAME 。 pfff。

我使用的是lvnm-webfont＆＃39;作为文件基名，与字体名称不同。它必须是levenim＆＃39;仅适用于IE - 在CDN或子域上。格拉齐吧？我认为它与版权有关。

但是当它是加载但从CDN或子域加载时未使用的版权字体时还有另一个问题。所以我只使用这个技巧IE来加载字体（在HTML页面中）：

注意：字体必须存在于域和子域中，并且必须在任何其他CSS（仅限IE）之后加载



我可以做得更有效，因为我可以在模板和CSS中使用IF语句来避免额外的服务器查找（我的框架的一部分）。像这样：

在CSS中：

/* #IF !$is_msie */ <load font from CDN> /* #ENDIF */

在HTML中：

 <load font from domain> 

您也可以选择从您的域中加载字体，但是当从子域提供css文件时您无法执行此操作，您也遇到了与IE相同的问题。在这种情况下，您需要在HTML（模板）中添加样式标记，如上例所示，但没有IE的条件注释。

希望它有所帮助。

字体在IE浏览器上不起作用

5 个答案:

什么？我不明白。

浏览器兼容性