标签: woff

什么mime类型应该作为WOFF字体？

我服务truetype(ttf)字体as font/truetype和opentype(otf)as font/opentype,但我找不到WOFF字体的正确格式.

我曾尝试font/woff,font/webopen和font/webopentype,但Chrome仍然会抱怨:

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

有人知道吗？

我@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;
}

今天我将Font Awesome软件包更新到4.3.0并注意到添加了woff2字体.该文件在CSS中链接,因此我需要配置nginx以正确地提供woff2文件.

目前我在nginx配置字体中有这个块:

location ~* \.(otf|eot|woff|ttf)$ {
    types     {font/opentype otf;}
    types     {application/vnd.ms-fontobject eot;}
    types     {font/truetype ttf;}
    types     {application/font-woff woff;}
}

什么是适用于woff2字体的mime类型？

你在哪里放置字体,以便CSS可以访问它们？

我在.woff文件中使用非标准字体作为浏览器.让我们说它'awesome-font'存储在'awesome-font.woff'文件中.

我使用@ 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

到目前为止,我已经使用了Paul Irish的防弹字体表格语法

但是我只是想看看对caniuse的.woff和.woff2文件的支持,它说IE9 +支持woff.关于这个主题的大多数文章来自2009年左右,在撰写本文时,这篇文章是整整7年前的.当woff现在享有如此广泛的支持时,我们真的需要继续声明ttf,otf,eot和svg吗？

我知道像Online Font Converter这样的服务,但我对离线解决方案很感兴趣,最好是通过命令行.有没有人知道如何将WOFF离线转换为OTF/TTF的工具或工作流程？

是否有任何免费或廉价的Windows编辑器,允许编辑扩展名为.woff的文件(我在css中检查过该字体文件有woff扩展名).这些是由Google Webfonts提供的字体,它们可以自由嵌入,修改等.我只想在特定语言的某些字母上添加diactric重音并将字体嵌入到网站上.

我在我的IIS管理器6本地主机上使用WOFF和WOFF2字体,但是当我在Azure网站上托管该站点时,它们会提供404.

我想我在Web.config中有正确的MIME类型(尝试使用和不使用点).我通过FTP连接时看到文件.我可以链接到我放在与字体相同的文件夹中的图像.我已经在Azure上重新启动了该站点.

Web.config文件

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
</configuration>

CSS

@font-face {
  font-family: 'Cutive';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/cutive.woff2) format('woff2'), url(../fonts/cutive.woff) format('woff');
}

我没有想法..任何人？谢谢!

在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中收到相同的消息.如何正确缓存？