我@font-face在我公司的网站上使用,它的工作/看起来很棒.除了Firefox和Chrome将在该.woff文件上引发404错误.IE不会抛出错误.我有字体位于根,但我已经尝试使用css文件夹中的字体,甚至给出了字体的整个网址.如果从我的css文件中删除这些字体,我没有得到404,所以我知道这不是语法错误.

另外,我使用fontsquirrels工具来创建@font-face字体和代码:

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('?'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('?'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

我下载了bootstrap 3.0,无法让glyphicons工作.我收到某种"E003"错误.任何想法为什么会这样？我在本地和网上尝试过,我仍然遇到同样的问题.

我需要为IIS Express添加.woff文件扩展名的新MIME映射.

如果我将以下代码段添加到IIS Express的"applicationhost.config",它可以正常工作:

<staticContent lockAttributes="isDocFooterFileName">
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    ...

但我真的想把它添加到我的"web.config"中,这样​​每个开发人员都不需要在本地更改他们的"applicationhost.config".

所以我再次从"applicationhost.config"文件中删除它,并将以下代码段添加到项目的"web.config"中:

<system.webServer>
  ...
  <staticContent>
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
  </staticContent>
</system.webServer>

不幸的是它似乎没有那样工作,因为当我尝试访问.woff文件时,我最终得到HTTP 404.3错误.

我究竟做错了什么？

我在使用Font Squirrel生成的程序中有一个font-face我无法让它在IIS中运行,它可以在localhost中运行.我将application/font-woff 文章添加到我的MIME类型中,但它仍然不想工作.

Context
--Fonts
----font location
--css files

CSS

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

编辑当前MIME

我使用默认的IIS 8 MIME 字体/ x-woff

我最近遇到了将Javascript请求发布到另一个域的问题.默认情况下,不允许将XHR发布到其他域.

按照http://enable-cors.org/的说明,我在其他域上启用了此功能.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>

现在一切正常,但是在发回工作200响应之前仍然会返回405响应.

Request URL:http://testapi.nottherealsite.com/api/Reporting/RunReport
Request Method:OPTIONS
Status Code:405 Method Not Allowed
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:POST
Connection:keep-alive
Host:testapi.nottherealsite.com
Origin:http://test.nottherealsite.com
Referer:http://test.nottherealsite.com/Reporting
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.89 Safari/537.1
Response Headersview source
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
Allow:POST
Cache-Control:private
Content-Length:1565
Content-Type:text/html; charset=utf-8
Date:Tue, 18 Sep 2012 14:26:06 GMT …

我在Google上收到了一条警告:

资源解释为Font但使用MIME类型application/octet-stream传输:".../Content/Fonts/iconFont.ttf".

即使我有这个警告它也有效,但我更喜欢避免这个警告.

这里是我的报关表:

@font-face {
  font-family: 'iconFont';
     src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), 
     url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), 
     url('../Fonts/iconFont.woff') format('font/x-woff'), 
     url('../Fonts/iconFont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

我已经搜索了其他帖子但到目前为止没有运气.

请注意,我的服务器是Microsoft的IIS.

任何想法我怎么能避免这个警告？

谢谢.

我使用@ font-face作为嵌入字体(感谢Paul Irish).在尝试修复Chrome关于woff字体的错误MIME类型的警告时,我发现了大量相互矛盾的建议.

每个人似乎都同意.eot字体(对于IE 6-8？)应该使用

AddType application/vnd.ms-fontobject .eot

对于.ttf字体(较旧的非IE浏览器？)我见过

AddType application/x-font-ttf        .ttf
AddType application/octet-stream      .ttf
AddType font/truetype                 .ttf
AddType font/ttf                      .ttf

对于.woff字体(新标准？)我见过

AddType application/font-wof          .woff
AddType application/x-font-woff       .woff
AddType application/x-woff            .woff

我理解woff 的正确MIME类型是application/font-woff,但是在标准正式之前,Chrome会理解application/x-font-woff.

我知道我已经半问了一下我的问题,但问题是:是否有关于字体应该使用什么MIME类型的权威指导或进一步的建议？

更新(如果它对任何其他人有任何帮助):因为似乎没有任何权威,我已经决定在我的.htaccess中使用以下字体MIME类型(这至少让Chrome开心):

AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf        .ttf
AddType application/x-font-woff       .woff

如上所述,虽然在IE8及以下的所有其他浏览器中显示良好,但我在IE9中没有显示@ font-face的问题.此外,在我的计算机上本地查看时,IE9会显示字体,而不是在完全显示时.

该网站是:

bigwavedesign.co.uk/gcc/gcc/

使用的代码是:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

有人想知道为什么会这样吗？

干杯!

=============================================

编辑

我发现以下网站在IE9中显示相同的字体,任何想法他是如何做到的？

http://iamthomasbishop.com/

这是@font-face我用过的声明:

@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}

这在Firefox中完美运行,但在Chrome中则不然.在"检查元素"后,我收到以下消息:

资源解释为字体但使用MIME类型application/octet-stream传输.

任何建议将不胜感激.

在PageSpeed Insights中,我一直看到消息来利用我正在使用的特定图标集/字体的浏览器缓存:iconFont.woff(2天)

我把我的.htaccess设置为:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType font/ttf "access 1 week"
ExpiresByType font/woff "access 1 week"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType text/css "access 1 week"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##

尽管如此,我仍然在PageSpeed Insights中收到相同的消息.如何正确缓存？