twitter-bootstrap 引导程序 3.2.0 字形未在 Internet Explorer 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25281286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3.2.0 glyphicons are not displaying in internet explorer
提问by mattFer
I am useing twitter bootstrap 3.2.0 and I use some glyphicons they work properly in ff, chrome, and opera but they are not displayed within the Internet Explorer.
我正在使用 twitter bootstrap 3.2.0 并且我使用了一些字形，它们在 ff、chrome 和 opera 中正常工作，但它们没有显示在 Internet Explorer 中。
The strange thing is, if i open the getbootstrap.com website and look at the "Components" section, even there they aren't displayed properly, so I doubt any implementing issues on my side.
奇怪的是，如果我打开 getbootstrap.com 网站并查看“组件”部分，即使在那里它们也没有正确显示，所以我怀疑我这边的任何实施问题。
Does anybody else have a similiar issue?? Or is knowing something about this behaviour?
有没有其他人有类似的问题？？或者对这种行为有所了解？
Here is a Scrennshot of how it looks in my Internet Explorer 11
这是它在我的 Internet Explorer 11 中的外观的屏幕截图
回答by mattFer
Ok, solved the Problem by myself.
好的，我自己解决了问题。
The Problem was, that somehow my IE went in a certain security state, in which the font download was disabled.
问题是，不知何故我的 IE 进入了某种安全状态，在这种状态下字体下载被禁用。
So I changed the Custom level of the "protected Mode" - you can find that in the Security Tab of the Internet Options Menu.
所以我更改了“保护模式”的自定义级别 - 您可以在 Internet 选项菜单的安全选项卡中找到它。
After you click on the "Custom level..." Button you have to search for "font download" and change it to "enable".
单击“自定义级别...”按钮后，您必须搜索“字体下载”并将其更改为“启用”。
Thanks for your help anyone!
感谢您的帮助！
回答by Tom Mettam
For those of you who may be experiencing a similar issue, there is a bug in Internet Explorer which causes webfonts not to render under certain cache-control situations.
对于那些可能遇到类似问题的人，Internet Explorer 中存在一个错误，该错误会导致 webfonts 在某些缓存控制情况下无法呈现。
If the server is sending the header Pragma: no-cacheand/or Cache-Control no-store, this will cause IE to fail to render the glyphs.
如果服务器发送标头Pragma: no-cache和/或Cache-Control no-store，这将导致 IE 无法呈现字形。
This took me hours to track down, so hopefully posting here will help others save time!
这花了我几个小时来追踪，所以希望在这里发帖可以帮助其他人节省时间！
回答by Jagadeeswara Rao
Load the bootstrap.cssfrom CDN instead of the resources folder in the application. It worked for me after loading from CDN.
从 CDN加载bootstrap.css而不是应用程序中的资源文件夹。从 CDN 加载后，它对我有用。
Check-in networks tab what are the files which are using the glyphicon-screenshotor icons which are not loading. in my case, it is "glyphicon-screenshot" not loading in IE 11 browser.
签入网络选项卡哪些文件正在使用glyphicon 屏幕截图或未加载的图标。就我而言，它是“ glyphicon-screenshot”未在 IE 11 浏览器中加载。
Before that check, the font(s) are enabled
在检查之前，字体已启用
and Icon(s) which are not loaded will show error in styles tab f12 debug tool.
和未加载的图标将在样式选项卡 f12 调试工具中显示错误。
回答by zchpit
Like I mention in this thread: github
就像我在这个线程中提到的：github
The problem is that, the browser (IE 11) need to recive:
问题是，浏览器（IE 11）需要接收：
- static content files need to have Cache-Control and Pragma with "public, max-age=600"
- angular requests need to have Cache-Control and Pragma with "no-cache"
- 静态内容文件需要具有“public, max-age=600”的 Cache-Control 和 Pragma
- 角度请求需要具有“无缓存”的 Cache-Control 和 Pragma
In my app (.net core + angular)
在我的应用程序中（.net core + angular）
app.js
应用程序.js
var cacheConfig = function ($httpProvider) {
$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.cache = false;
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
};
Startup.cs
启动文件
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = ctx =>
{
ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
ctx.Context.Response.Headers.Append("Pragma", "public,max-age=600");
//ctx.Context.Response.Headers.Append("ETag", DateTime.Now.Ticks.ToString());
}
});
回答by Rajeesh K
This is too late to answer , but recently i faced issue with Angular 4 + grails as backend. For me all the resources in webapp folder in grails was setting the
现在回答为时已晚，但最近我遇到了 Angular 4 + grails 作为后端的问题。对我来说，grails 中 webapp 文件夹中的所有资源都在设置
Cache-control : 'no-store'.
and there is no header like modified-since , or expires etc. This was causing the issue. I updated the application.yml like below to fix this issue , and it worked for me.
并且没有像 modified-since 或 expires 之类的标头。这是导致问题的原因。我像下面这样更新了 application.yml 来解决这个问题，它对我有用。
grails:
resources:
cachePeriod: 10
and this will set response header like below
这将设置如下响应标头
Cache-Control : max-age=10
回答by Daryl
In our case, our enterprise windows 10 images have a setting to block untrusted fonts that only affects IE11. Chrome/FF/Edge all display the fonts correctly. Accessing our site on my personal machine (not my company machine) in IE11 showed the fonts perfectly fine.
在我们的案例中，我们的企业 Windows 10 图像具有阻止仅影响 IE11 的不受信任字体的设置。Chrome/FF/Edge 都可以正确显示字体。在 IE11 中在我的个人机器（不是我公司的机器）上访问我们的网站显示字体非常好。
See this article for details:
详情请看这篇文章：
回答by nbaosullivan
To solve on a nginx setup I added this to our config file
为了解决 nginx 设置，我将其添加到我们的配置文件中
# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
expires 1w;
access_log off;
add_header Cache-Control "public";
}
回答by dblum
To solve on a wildfly setup you need to change your standalone.xml file at the untertow section:
要解决 Wildfly 设置，您需要在 untertow 部分更改 standalone.xml 文件：
<server name="default-server">
<host name="default-host" alias="localhost">
...
<filter-ref name="custom-max-age" predicate="path-suffix['.woff'] or path-suffix ['.woff2'] or path-suffix ['.ttf'] or path-suffix ['.svg'] or path-suffix ['.eot'] or path-suffix ['.otf']"/>
</host>
</server>
<filters>
<response-header name="custom-max-age" header-name="Cache-Control" header-value="public"/>
</filters>
