浏览器不请求字体文件

Question

我在 font-awesome 方面遇到了一个非常奇怪的问题。

长话短说：浏览器忽略了@font-face 的“src”部分，并且没有对实际字体提出任何请求。

//font-awesome.css excerpt

@font-face {
    font-family: 'FontAwesome';
    src: url('/Content/fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('/Content/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('/Content/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('/Content/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('/Content/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

• 所有软件和库都是最新的稳定版本。
• 控制台中没有错误。
• 字体文件在直接请求时完全可以下载
• 在 Chrome、FireFox 和 IE 中测试
• 我的另一个项目使用以前主要版本的 bootstrap 和 font-awesome 运行良好

http://jsfiddle.net/c2zUh

Answer 1

您的 HTML 没有引用图标的基类（设置字体）。您需要包含基类，然后包含图标，即

<span class="glyphicon glyphicon-asterisk"></span> 

不是

<span class="glyphicon-asterisk"></span>

和

<i class="fa fa-group"></i>

不是

<i class="fa-group"></i>

你还需要 glyphicon 和 fa 类

并且作为注释，如果您不使用实际应用于元素的样式规则（@font-face 不计算在内）中的字体，则不会请求它。因此，除非元素具有 glyphicon 或 fa 类，否则不会下载相关的字体文件。我必须承认，这对我来说是个新闻。

Answer 2

您也可以尝试以 woff 格式嵌入字体 - 就在 base64 的 .css 文件中。 它在所有浏览器和 IE 9+ 中都能完美运行

另外，可能是这种情况，你的系统中已经安装了这个字体，这会阻止下载......

Answer 3

尝试在 IIS 中打开您的站点，然后转到“属性”>“HTTP 标头”>“MIME 类型”。为以下各项添加一个新的 MIME 类型：

扩展名：.otf

MIME 类型：字体/otf

-

扩展名：.svg

MIME 类型：图片/svg+xml

-

扩展名：.woff

MIME 类型：application/x-font-woff

让我知道这是否会产生盲目的影响！