Question

我正在使用twitter bootstrap 3.2.0，我使用了一些字形，它们在ff，chrome和opera中正常工作，但它们不会在Internet Explorer中显示。

奇怪的是，如果我打开getbootstrap.com网站并查看“组件”部分，即使在那里它们也没有正确显示，所以我怀疑我的任何实施问题。

还有其他人有类似的问题吗？或者是了解这种行为？

以下是关于它在我的Internet Explorer 11中的外观的Scrennshot

http://we.tl/nsDnTiZqoZ

Answer 1

好的，我自己解决了这个问题。

问题是，我的IE以某种方式进入某种安全状态，其中字体下载被禁用。

所以我更改了“受保护模式”的自定义级别 - 您可以在“Internet选项”菜单的“安全”选项卡中找到它。

点击“自定义级别...”按钮后，您必须搜索“字体下载”并将其更改为“启用”。

感谢您的帮助！

Answer 2

对于那些可能遇到类似问题的人，Internet Explorer中存在一个错误，导致webfonts无法在某些缓存控制情况下呈现。

如果服务器正在发送标题 Pragma：no-cache 和/或 Cache-Control no-store ，则会导致IE无法呈现字形。

这花了我几个小时来追踪，所以希望在这里发帖将有助于其他人节省时间！

Answer 3

就像我在这个帖子中提到的那样：github

问题在于，浏览器（IE 11）需要重温：

静态内容文件需要具有Cache-Control和Pragma “public，max-age = 600”
角度请求需要具有Cache-Control和带有“无缓存”的Pragma

在我的应用中（.net core + angular）

app.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());
                }
            });

Answer 4

现在回答已经太晚了，但最近我遇到了Angular 4 + grails作为后端的问题。对我来说，grails中webapp文件夹中的所有资源都是设置

Cache-control : 'no-store'.

并且没有像modified，since或expires等标题。这导致了问题。我更新了application.yml，如下所示来解决这个问题，它对我有用。

grails:
    resources:
        cachePeriod: 10

这将设置响应标题，如下所示

Cache-Control   : max-age=10

Answer 5

从CDN加载 bootstrap.css ，而不是从应用程序中的resources文件夹加载。从CDN加载后，它对我有用。

“签入网络”选项卡上正在使用 glyphicon屏幕截图的文件是什么，或者正在加载的图标是什么。就我而言，这是“ glyphicon屏幕截图”未在IE 11浏览器中加载。

在进行此检查之前，已启用字体enter image description here 和未加载的图标会在样式标签f12调试工具中显示错误。 enter image description here

Answer 6

要在nginx设置上解决，我将其添加到配置文件

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}

Answer 7

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

Answer 8

在我们的示例中，我们的企业Windows 10映像具有阻止仅影响IE11的不受信任字体的设置。 Chrome / FF / Edge全部正确显示字体。在IE11中访问我的个人计算机（不是我的公司机器）上的网站显示字体非常好。

有关详细信息，请参阅此文章：

https://blogs.technet.microsoft.com/secguide/2017/06/15/dropping-the-untrusted-font-blocking-setting/

Answer 9

如果您在 Java 应用程序中遇到此问题，则解决方案可以是创建 Filter （ javax.servlet.Filter ），以防止在对fonts文件夹的请求响应中设置这些标题。这似乎对我们的项目很好。确保将过滤器配置为 web.xml 文件中的第一个组件。更多信息，请点击How do delete a HTTP response header?

bootstrap 3.2.0 glyphicons没有在Internet Explorer中显示

9 个答案: