Question

我正试图解决我们在Twitter Bootstrap的Glyphicons中遇到的问题。在我们的开发环境中，我们的机器运行良好。问题是当客户端尝试查看我们的代码时。他们被迫拥有IE网络政策，不允许下载glyphicon的字体文件。我可以告诉这种情况，因为我正在检查IE调试器中的网络选项卡，它显示它无法下载字体文件。 IE政策是“允许字体下载”。让他们改变他们的政策可能是不行的。我想知道是否有任何替代方案除了以某种方式提取图像和使用img标签。如果后者是唯一的解决方案，有没有人有最好的方法来实现这一目标？关于bootstrap的事情是我们能够轻松地改变glyphicons的大小/颜色，以及通过改变css类来简化js修改。

以下是我们在应用中导入它们的方式：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

实际的字体图块位于资源/字体中。 css文件在resources / css中。我们知道他们在那里，因为所有其他环境都能看到图标。

IE网络消息：

Key     Value
Request         GET /appName/resources/fonts/glyphicons-halflings-regular.eot? HTTP/1.1

使用glyphicons：

<span class="glyphicon glyphicon-minus-sign"></span>

Answer 1

感谢所有回复。看来，解决这个问题的唯一方法就是使用我自己的图像。我只需更换bootstrap css就可以最大限度地减少代码影响：在插入glyphicon字符之前，只需使用有人在线发布字形的图像替换span元素背景上的样式。如果有人对我使用的每个字形感兴趣，我用插入的类替换下面注释掉的代码，这似乎解决了我的问题。

.glyphicon-plus-sign{
    display: inline-block;
    overflow: hidden;
    color: transparent;
    font-family: sans-serif;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('../images/glyphicons_190_circle_plus.png');
    background-size: cover;
}
/*.glyphicon-plus-sign:before {
  content: "\e081";
}*/

Bootstrap：无法下载Glyphicon字体文件

1 个答案: