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

Font face is not working on IE browser

提问by Mark Martin

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

我在 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

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

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

Please help me on this.

请帮我解决这个问题。

回答by Tom Sarduy

That′s the old IE bug ;)

那是旧的 IE 错误 ;)

Bulletproof @font-face syntax:

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

What? I don't get it.

什么？我不明白。

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

使这项工作的黑客技巧是?以下 EOT 文件名。认真的。

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

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.

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

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

• @font-face EOT 未通过 HTTPS 加载
• IE9 阻止下载跨域网络字体
• 在 IE9 中使 Adob​​e 字体与 CSS3 @font-face 一起使用

They few possible solutions to the problem. Good luck!

他们对问题的可能解决方案很少。祝你好运！

回答by Jamir Khan

Try this Font Face Code in css:

在 css 中试试这个 Font Face Code：

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

or you can upload your font on : http://www.fontsquirrel.com/fontface/generatorand get font-face kit and css also this will work on all browsers.

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

回答by Jean-Georges

This is hte code i use. But i never needed any htaccess code. Never had any problem with it.

这是我使用的 hte 代码。但我从不需要任何 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');

}

回答by SigmaDanny

This is an old question, however I feel it would be best if I answered it now as I came across the same problem with IE even after all possible solutions were applied. I am assuming the website in question here was hosted on a local server, which IS the problem with IE essentially. It took me a while to realize, but I noticed that my live website had working fonts, whilst my local version didn't. By default IE usually has a setting applied to show compatibility view mode in the browser for locally hosted websites (Intranet), which means that some styling may not work correctly as intended and also imported fonts often will not work.

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

To disable this setting, go to the IE menu by clicking the cog/gear icon in the top-right > Compatibility View Settings and then un-check "Display intranet sites in Compatibility View. This should solve the problem for future visitors here, I am using IE11 and this still occurs, so it is likely to be the same for years to come, since IE only just got unlimited tabs now too.

要禁用此设置，请通过单击右上角的齿轮/齿轮图标转到 IE 菜单 > 兼容性视图设置，然后取消选中“在兼容性视图中显示 Intranet 站点。这应该可以解决未来访问者的问题，我我正在使用 IE11 并且这种情况仍然会发生，因此在未来几年内可能会一样，因为 IE 现在也只有无限的选项卡。

回答by Codebeat

Credits to this guy/forum: http://www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

归功于此人/论坛：http: //www.experts-exchange.com/Web_Development/Blogs/WordPress/Q_28367854.html

I experience the same problem with IE11, use the font levenim on my site. Headers correct, everything as it should be. When I use a CDN or subdomain it won't load and when on the same domain it loads perfectly. What's the problem? THE FILENAME. pfff.

我在IE11 上遇到了同样的问题，在我的网站上使用字体 levenim。标题正确，一切都应该如此。当我使用 CDN 或子域时，它不会加载，而在同一域上时，它会完美加载。有什么问题？文件名。噗。

I use 'lvnm-webfont' as file basename and is NOT the same as the font name. It MUST be 'levenim' for IE-only when it is on a CDN or subdomain. Grazy right? I think it has something to do with copyrights.

我使用 'lvnm-webfont' 作为文件基名，与字体名称不同。当它位于 CDN 或子域上时，它必须是 'levenim' 仅适用于 IE。吃草吧？我认为这与版权有关。

But there is another problem when it is a copyright font it will load but not used when loaded from CDN or subdomain. So I use this trick for IE only to load the font anyway (in HTML page):

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

NOTICE: Font must exists on domain and subdomain and must be loaded AFTER any other CSS (IE-only)

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

<!--[if gte IE 7]]>
<style type="text/css">
@font-face {
    font-family: '__siteFont__';
    src: url('fonts/lvnm/lvnm-webfont.eot');
    src: local('?'), url('fonts/lvnm/lvnm-webfont.woff') format('woff'), 
                     url('fonts/lvnm/lvnm-webfont.ttf') format('truetype'), 
                     url('fonts/lvnm/lvnm-webfont.svg#webfontTVnpYENL') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
<![endif]-->

I can do it more effecient because I can use IF statements in templates and CSS to avoid an extra server lookup (part of my framework). Something like this:

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

In CSS:

在 CSS 中：

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

In HTML:

在 HTML 中：

<!-- #IF $is_msie -->
<load font from domain>
<!-- #ENDIF -->

You can also choose to load the fonts from your domain but you can't do this when the css file is served from a subdomain, you've got the same issues with IE. In that case you need to add a style tag in your HTML (template) like example above but without the Conditional Comments of IE.

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

Hopes it helps.

希望它有帮助。