Question

我想用html5和bootstrap设计一个网站。在我的html代码中我需要font-awesome icons.But当我把font-awesome.min.css和相应的字体但我无法加载字体真棒图标给我页面。当检查该页面时，我在控制台上收到以下错误和警告。

downloadable font: download failed (font-family: "Roboto" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/regular.ttf  style.css:9:1
downloadable font: download failed (font-family: "Roboto" style:normal weight:300 stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Roboto/roboto-light.ttf  style.css:46:1

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/fonts/fontawesome-webfont.woff?v=4.2.0  font-awesome.min.css:4:14
downloadable font: download failed (font-family: "Open Sans" style:normal weight:bold stretch:normal src index:0): bad URI or cross-site access not allowed source: http://[::1]/futuroit/userasset/css/Fonts/Open%20Sans/OpenSans-Regular.ttf

请有人帮我解决这个问题

Answer 1

地址错误（或）配置设置缺失

直接在浏览器上查看您的地址，或者只是放置来源并参考路径。
请参阅此Downloadable font on firefox: bad URI or cross-site access not allowed

Answer 2

尝试包含 font-awesome.css 插件而非 font-awesome.min.css ，因为有时它会显示错误。当您在html文件中包含此插件时，将其包含在所有脚本文件之上的某个时候它也会产生问题。

Answer 3

确保使用正确的字体格式。

对我来说，Firefox 给出了错误：

downloadable font: rejected by sanitizer (font-family: "opensans-semibold" style:normal weight:400 stretch:100 src index:1) source: <path-to-font>/OpenSans-SemiBold.svg

检查文件后，format() 中为 svg 提供的格式不正确：

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("woff2");

所以格式 woff2 是为 svg 字体提供的，我更正为：

url("../fonts/open-sans/open-sans-regular/OpenSans-Regular.svg") format("svg");

问题就解决了！

Answer 4

地址错误（或）配置设置丢失通过直接在浏览器上检查您的地址来验证您的地址，或者简单地输入来源并引用路径。在 Firefox 上引用此可下载字体：不允许使用错误的 URI 或跨站点访问

缺少字体真棒图标

4 个答案: