如果 Bootstrap CSS 文件在本地托管，字形图标会损坏

Question

我在一个项目中使用 Twitter Bootstrap 3.0。没有在外部托管任何文件的固定要求。但是当我在本地托管 .css 和 .js 文件时，Glyphicons 会损坏。

它应该是这样的：

使用bootstrap.min.css from the original CDN 不会出现错误，但是将相同的文件放在本地服务器上会影响图标呈现，如下图所示：

我是否使用 wget、DownThemAll 下载并保存原始文件，或者在 Firefox 上打开它并使用“另存为”功能似乎并不重要。 <link> href 是 href="/css/bootstrap.min.css、href="http://www.domain.com/css/bootstrap.min.css 还是 href="http://www.domain.com/bootstrap.min.css 无关紧要。

我的开发机器正在运行 Linux。我只能用它来浏览网站，无论是在我的开发机器上还是在生产环境中。我使用的是 Firefox 26，but changing the value of security.fileuri.strict_origin_policy 没有效果。据我所知，导致渲染错误的唯一区别是 CSS 文件位置。

这个问题发生在我的开发机器和实时服务器上。

Answer 1

Glyphicons 是从 Twitter Bootstrap 的 CDN 版本中硬编码的地址加载的网络字体。原代码为：

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

您必须编辑 CSS 或将字体文件放在 /fonts/ 文件夹中。您可以在“customize”页面获取字体和 CSS 文件。