blocks|key|1064702|text|语法是正确的，但是无论您用什么转换器将.tff转换为.eof，都可能会出现问题。有关此事项的更多详细信息，请参阅本文，在一般的http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face中|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1064703|同时，您可以尝试使用由Google字体托管的字体来测试这个问题。我这么说是因为Google可以无缝地处理跨浏览器的兼容性。如果结果是谷歌字体工作，那么你就知道你的字体转换的方式有问题，你需要尝试另一种字体。据我所知，字体松鼠非常擅长生成跨浏览器兼容的字体。我希望这能给你带来好运|1064704|entityMap|0|LINK|mutability|MUTABLE|url|http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face|1|http://www.fontsquirrel.com/tools/webfont-generator^0|1R|1Y|0|0|30|4|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

The syntax is correct, however there may be an issue with the way whatever converter you used to converted from .tff to .eof. See this the article for more details on this matter in general <a href="http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face" rel="nofollow">http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face</a>

In the mean time you could try testing the problem by using a font hosted by Google fonts. I say this because Google handles cross browser compatibility seamlessly. If it turns out that the Google font works then you know its a problem with the way that your font was converted and you need to try another one. From what I understand <a href="http://www.fontsquirrel.com/tools/webfont-generator" rel="nofollow">Font Squirrel</a> is really good at generating cross browser compatible fonts. I hope this helps good luck

blocks|key|1210317|text|遇到类似的问题，从上面的截图中，响应有一个“无商店”的缓存控制头。IE似乎在缓存和字体方面有问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1210318|移除“缓存控制:无存储”和"Pragma:+no-cache“标题对我们工作，使图标字体再次出现。|1210319|https://github.com/FortAwesome/Font-Awesome/issues/6454|offset|length|1210320|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1J|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.

Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.

<a href="https://github.com/FortAwesome/Font-Awesome/issues/6454" rel="noreferrer">https://github.com/FortAwesome/Font-Awesome/issues/6454</a>

blocks|key|1210327|text|我有一个类似的问题，这似乎是由于IE有困难的某些display和position设置组合图标。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1210328|它通常应使用以下方法：|1210329|element:before+{
+++++display:block;
+++++position:+absolute;
+++++...+your+styles+...
}|code-block|syntax|javascript|1210330|entityMap^0|O|7|W|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I had a similar problem and it seems to be caused by IE having difficulty with certain <code>display</code> and <code>position</code> settings in combination with iconfonts.

It should usually work using:

<pre><code>element:before {
 display:block;
 position: absolute;
 ... your styles ...
}
</code></pre>

blocks|key|1210360|text|我也遇到了类似的问题，但是使用了引导字体图标(Glyphicons)。你可以试一试，如果成功的话：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1210361|(通常在windows+10上)+IE-11设置已经更改为不下载任何外部字体，并且只使用Windows中可用的字体。这是默认行为。|1210362|但是，我们可以在IE中更改此设置，以使其能够下载外部字体。以下是IE中要执行的步骤:设置>>因特网选项>>安全性|1210363|📷|atomic|offset|length|1210364|​|1210365|单击“Internet”(或您可能使用的任何区域)+>>“自定义级别…”|1210366|下一步在‘安全设置’-启用‘字体下载’。默认情况下，它将被禁用。|1210367|1210368|1210369|刷新页面|1210370|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/399832c77e6b1055884b6012d7c20b40.jpg|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/1e84a3500183ee604210cb6bd1f1ef92.jpg^0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@$I|19|J|1A|1|1B]]|A|$]]|$1|K|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|G|5|H|7|1F|8|@]|9|@$I|1G|J|1H|1|1I]]|A|$]]|$1|R|3|L|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]|13|$5|X|Y|Z|A|$10|14|12|-4]]]]

I faced similar problem but with Bootstrap font icons (Glyphicons). You can try if this works: 

(Generally on Windows 10) the IE-11 settings have been changed to not download any external fonts and use only the fonts available in windows. This is the default behavior. 

However we can change this setting in IE to enable it to download external fonts. Following are the steps to be taken in IE-
Go to: Settings >> Internet Options >> Security
<a href="https://i.stack.imgur.com/9YeZv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9YeZv.jpg" alt="enter image description here"></a>

Click on “Internet” (or any zone that you may be using) >> “Custom level…” 
Next in the ‘security settings’ – Enable ‘Font Download’. By default it would be disabled.
<a href="https://i.stack.imgur.com/hibgl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hibgl.jpg" alt="enter image description here"></a>

Refresh the Page

blocks|key|1064777|text|在调查了同一问题并浏览了网上发布的各种解决方案之后，我创建了以下故障排除列表，其中涵盖了大多数潜在原因：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1064778|字体下载在IE中禁用，在因特网选项/安全/自定义级别/字体下载支持/disable。它们可能被您的网络管理员禁用，在这种情况下，您将无法看到或更改此设置。|ordered-list-item|1064779|HTTP头阻止IE在本地存储字体文件。若要修复，请删除任何Cache-Control:+no-store,+no-cache或Pragma:+no-cache标头，或任何带有过去日期的Expires标头。此外，Vary头在IE中也有它的窍门，如果设置为Accept-Encoding、User-Agent、Host或Accept-Language以外的任何东西，那么IE将不会缓存任何东西，除非和ETAG报头也存在(参见这篇MSDN博客文章)。|offset|length|style|CODE|1064780|您没有为字体下载设置正确的MIME类型。例如，Jetty+9将在默认情况下为通常的字体类型(+Content-Type:+text/plain+)设置eot,+woff,+woff2。有关要使用的适当内容类型，请参见这个答案。|1064781|确保对图标元素使用display:+block或display:+inline-block。|1064782|最后，确保通过故障排除指南在FontAwesome。|1064783|entityMap|0|LINK|mutability|MUTABLE|url|https://blogs.msdn.microsoft.com/ie/2010/07/14/caching-improvements-in-internet-explorer-9/|1|https://stackoverflow.com/a/10864297/981913|2|https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting^0|0|0|T|X|1R|G|2K|7|2X|4|3I|F|3Y|A|49|4|4E|F|5I|4|5U|A|0|0|1B|O|23|G|30|4|1|0|9|E|O|L|0|7|6|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|14|8|@$G|15|H|16|I|J]|$G|17|H|18|I|J]|$G|19|H|1A|I|J]|$G|1B|H|1C|I|J]|$G|1D|H|1E|I|J]|$G|1F|H|1G|I|J]|$G|1H|H|1I|I|J]|$G|1J|H|1K|I|J]|$G|1L|H|1M|I|J]]|9|@$G|1N|H|1O|1|1P]]|A|$]]|$1|K|3|L|5|D|7|1Q|8|@$G|1R|H|1S|I|J]|$G|1T|H|1U|I|J]]|9|@$G|1V|H|1W|1|1X]]|A|$]]|$1|M|3|N|5|D|7|1Y|8|@$G|1Z|H|20|I|J]|$G|21|H|22|I|J]]|9|@]|A|$]]|$1|O|3|P|5|D|7|23|8|@]|9|@$G|24|H|25|1|26]]|A|$]]|$1|Q|3|-4|5|6|7|27|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]]]

After investigating the very same issue, and going through various solutions posted online, I've created the following troubleshooting list, which covers most potential causes:

<ol>
<li>Font downloads are disabled in IE, under Internet Options / Security / Custom Level / Font Downloads enable /disable. They might be disabled by your network admin, in which case you would not be able to see nor change this setting.</li>
<li>Your HTTP headers prevent IE from storing the font file locally. To fix, remove any <code>Cache-Control: no-store, no-cache</code> or <code>Pragma: no-cache</code> headers, or any <code>Expires</code> header with a date in the past. Also the <code>Vary</code> header has its tricks in IE, if set to anything other than <code>Accept-Encoding</code>, <code>User-Agent</code>, <code>Host</code> or <code>Accept-Language</code> then IE will not cache anything, unless an <code>ETAG</code> header is also present (see <a href="https://blogs.msdn.microsoft.com/ie/2010/07/14/caching-improvements-in-internet-explorer-9/" rel="noreferrer">this MSDN blog post</a>). </li>
<li>You don't set the correct MIME types for the font download. For example Jetty 9 will set by default <code>Content-Type: text/plain</code> for the usual font types (<code>eot, woff, woff2</code>). See <a href="https://stackoverflow.com/a/10864297/981913">this answer</a> for the proper content types to use.</li>
<li>Make sure to use <code>display: block</code> or <code>display: inline-block</code> for your icon element.</li>
<li>Finally, make sure to go through the <a href="https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting" rel="noreferrer">troubleshooting guide</a> over at FontAwesome.</li>
</ol>

blocks|key|1210481|text|这就是问题所在：功能|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1210482|基本上，微软让我们不得不回到使用雪碧片。|1210483|entityMap|0|LINK|mutability|MUTABLE|url|https://learn.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature^0|8|2|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

This is the problem: 
<a href="https://learn.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature</a>

Basically Microsoft is making us have to go back to using sprite sheets.

blocks|key|1064801|text|在我的例子中，它被损坏了.eot字体文件。我已经生成了一个新的(%2B新的.css样式)，它解决了这个问题。试试看。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1064802|PS。例如，请确保在@字体面支持IE的EOT：|1064803|@font-face+{
++font-family:+"fontName";
++src:url("../../src/theme/fonts/fontName.eot");
++src:url("../../src/theme/fonts/fontName.eot?#iefix")+format("embedded-opentype"),
++url("../../src/theme/fonts/fontName.woff")+format("woff"),
++url("../../src/theme/fonts/fontName.ttf")+format("truetype"),
++url("../../src/theme/fonts/fontName.svg#fontName")+format("svg");
++font-weight:+normal;
++font-style:+normal;
}|code-block|syntax|javascript|1064804|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it. 

PS. Make sure you support EOT for IE at @font-face, for example:

<pre><code>@font-face {
 font-family: "fontName";
 src:url("../../src/theme/fonts/fontName.eot");
 src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
 url("../../src/theme/fonts/fontName.woff") format("woff"),
 url("../../src/theme/fonts/fontName.ttf") format("truetype"),
 url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
 font-weight: normal;
 font-style: normal;
}
</code></pre>

We're using icomoon for our icon fonts, and they work fine in Chrome and Firefox, but won't display in IE11... Sometimes. It seems to work on the first page load, but not on subsequent page loads. Clearing the cache doesn't seem to reset it. This issue may be present in other IE versions, right now we're just focusing on IE11.

Here's our @font-face:

<pre><code>@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
 url('fonts/icon.woff?-3q3vo5') format('woff'),
 url('fonts/icon.ttf?-3q3vo5') format('truetype'),
 url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */
</code></pre>

But here's where it gets weird. Looking at the developer tools, an HTTP request for the fonts is being sent, but only a few hundred bytes are being received (probably just the headers).

<img src="https://i.stack.imgur.com/Pi6YS.png" alt="Network panel">

But the HTTP response lists the content length correctly as several kilobytes.

<img src="https://i.stack.imgur.com/fBDyK.png" alt="Response headers">

The "Response body" tab just says "No data to view."

You can see in the Network Panel screenshot that the Google Fonts aren't behaving like this.

Pasting the URL in the location bar results in the full file being downloaded.

Icon fonts not loading in IE11

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我们使用图标字体，它们在Chrome和Firefox中运行良好，但不会在IE11中显示.有时候。它似乎适用于第一个页面加载，但不适用于随后的页面加载。清除缓存似乎没有重置它。这个问题可能会出现在其他IE版本中，现在我们只关注IE11。这是我们的@字体脸：@font-face {font-family: 'icon';s...

问没有在IE11中加载图标字体
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问没有在IE11中加载图标字体EN