【错误报告】bootstrap图标不显示:跨源请求失败、资源访问受限

核心提示ie浏览器里bootstrap图标不显示成功应用bootstrap字体图标后以下错误信息被显示在IE11调试工具的控制台: CSS3117: @font-face 跨源请求失败。资源访问受限。

ie浏览器里bootstrap图标不显示
ie浏览器里bootstrap图标不显示

成功应用bootstrap字体图标
成功应用bootstrap字体图标后

以下错误信息被显示在IE11调试工具的控制台:

 CSS3117: @font-face 跨源请求失败。资源访问受限。 fontawesome-webfont.eot

IE调试工具:跨源请求失败,资源访问受限
IE调试工具:跨源请求失败,资源访问受限

出现如图所示的错误会导致bootstrap字体图标不显示,可能原因:

一、由于@font-face的src引起的跨源问题,可以试着把font-awesome.css里@font-face的相对路径改成绝对路径;

二、去掉font-awesome.css 文件里@font-face路径诸如#iefix&v=3.2.1的后缀;

查找css文件里.eot路径的后缀
查找css文件里.eot路径的后缀

附:

这些错误的格式为 CSS31<em>xx</em> 并且与 &quot;Web 开放字体格式 (WOFF)&quot; 和 &quot;嵌入式 OpenType 字体 (EOT)&quot; 源和主机服务器问题有关。

代码 消息 描述 建议解决办法

CSS3111

"@font-face 遇到未知错误"

级联样式表 (CSS) 字体的 "Web 开放字体格式 (WOFF)" 和 "嵌入式 OpenType 字体 (EOT)" 遇到未知问题。

检查 "WOFF" 字体的源。尝试其他字体或源看是否还出现问题。

CSS3112

"@font-face 未通过 WOFF 完整性检查"

"Web 开放字体格式 (WOFF)" 字体可能已损坏、不完整或者不是正确的格式。

检查字体的源。尝试已知正确的字体或源看是否还出现问题。

CSS3113

"@font-face 在文档来源和 EOT 根字符串之间不匹配"

无法使用该字体,因为"嵌入式 OpenType 字体 (EOT)" 中的 URL(rootstring) 与使用该字体的文档的域不匹配。

"EOT" rootstring 中的 URL 校验和可能不正确、指示该字体已损坏或者该字体的 URL 已改变。确保字体已授权,或对将使用这些字体的网站具有相应的权限。

CSS3114

"@font-face 未通过 OpenType 嵌入式权限检查。权限必须可安装。"

字体没有通过当前网页安装的权限。

请获取正确的权限或嵌入该字体的授权。

CSS3115

"@font-face 无法加载无效的 OpenType 字体。"

对于这种使用,该字体无效。

请获取当前有效字体的权限或授权。

CSS3116

"@font-face 跨源请求失败。无 Access-Control-Allow-Origin 标头。"

该字体可能未配置为跨域访问。

字体与文档不是同一个源。请通过使用 "Access-Control-Allow-Origin"HTTP 标头确保处理该字体的主机允许使用该字体。

CSS3117

"@font-face 跨源请求失败。资源访问受限。"

"Access-Control-Allow-Origin" 标头可能未正确配置或者字体主机可能不允许你的页面使用该字体。

请确保正确的权限并且正确配置对处理字体的主机具有跨域访问源的 HTTP 响应标头。

查看更多关于F12 开发人员工具控制台错误消息(IE浏览器)的信息

查看bootstrap图标及css命名方法