标签: woff

我已经看到一些Google Webfonts现在使用WOFF 2.0.我可以以某种方式将我现有的WOFF字体转换为这种新的(并且可能是更好的格式)吗？如何？

我试图让一个字体在一个文件中呈现,它给我通常的错误

Resource interpreted as Font but transferred with MIME type text/html:

但是展示的HTML文件是我们的404.aspx文件,我尝试在web.config中安装应用程序,然后最终进入IIS本身:

.woff  application/font-woff
.ttf   application/font-ttf
.eot   application/vnd.ms-fontobject
.otf   application/font-otf
.svg   image/svg+xml

我无法理解我哪里出错了.这些文件存储在一个名为fonts的文件夹中,该文件夹位于该站点的基本目录中,我的样式位于我的aspx文件中

@font-face {
    font-family: 'segoe_printregular';
    src: url('/fonts/segoepr-webfont.eot'); /* IE9 Compat Modes */
    src: url('/fonts/segoepr-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/fonts/segoepr-webfont.woff') format('woff'), /* Modern Browsers */
         url('/fonts/segoepr-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/fonts/segoepr-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}

和fonts文件夹中的stylesheet.css如下:

@font-face {
    font-family: 'segoe_printregular';
    src: url('/segoepr-webfont.eot'); /* IE9 Compat Modes */
    src: url('/segoepr-webfont.eot?#iefix') format('embedded-opentype'), /* …

我想用谷歌字体添加一个字体,我注意到一个奇怪的行为.

我想添加一个只有拉丁子集的字体,我不想要latin-ext,cyrillic或者cyrillic-ext子集,以减轻代码.我明白这是默认行为,所以我这样做了:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher">

在Firefox(以及其他不支持WOFF2的浏览器)中,我得到了正确的输出:

@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLbrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
}

但在Chrome中,我得到了这个:

/* cyrillic */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLV4sYYdJg5dU2qzJEVSuta0.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
    font-family: 'Philosopher';
    font-style: normal;
    font-weight: 400;
    src: local('Philosopher'), url(http://fonts.gstatic.com/s/philosopher/v7/OttjxgcoEsufOGSINYBGLZQV2lvL5Ba9FjAYK6Lx0Qk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

我想,也许拉丁子集不再是默认行为了,所以我添加了我<link>的subsetGET参数:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&subset=latin"> …

我一直在尝试使用各种命令行和在线工具将TTF转换为WOFF.我试过以下:

命令行 :

• sfntwoff:https://people-mozilla.org/~jkew/woff/
• ttf2woff:http://wizard.ae.krakow.pl/~jb/ttf2woff/
• ruby gem:https://coderwall.com/p/kyc8lw/convert-fonts-from-the-command-line

在线:

• font squirrel:https://www.fontsquirrel.com/tools/webfont-generator
• transfonter:http://transfonter.org/

我有大小~220KB的ttf文件.所有这些工具都生成大小约为100KB的woff文件,但font-squirrel除外,它生成一个大小优化的文件~20KB.

我很好奇font-squirrel做了什么,没有其他命令行(阅读开源)工具能够做到.如果可能的话,我怎样才能通过命令行执行相同操作,即使它涉及编写或黑客攻击某些代码.

我正在尝试将ASP.Net MVC4 TwitterBootstrap应用程序部署到我在Azure的新主机上.

所有这些都是100%工作,除了文件'\ Fonts\glyphicons-halflings-regular.woff'在使用Chrome时出现404错误(使用F12时的网络选项卡).

我检查了我的解决方案,文件在那里:

我google了,发现这是一个mime类型问题和Azure.我找到了一个链接,说明修复是将其添加到web.config.

<staticContent>
  <mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>

我这样做了,404不再显示了.但是,我的页面需要额外加载1.56ms,因为它似乎每次加载页面时都会下载该woff文件 - 其中所有其他静态内容似乎都在每次加载时缓存在服务器上.

那是加载主页 - 并且是唯一被加载的文件.其余的似乎缓存？

加载另一个加载其他项的页面显示这是缓存似乎不感兴趣的文件:

有没有办法让这个文件缓存？我想可能需要将mime类型添加到他们的服务器某个地方？我对缓存和哑剧以及Azure都不熟悉.希望有一个解决方案,因为这个文件几乎是Azure上所有页面上的页面加载时间的两倍.我的另一个廉价主机没有这个问题.

我在Azure中提供静态站点(实际上是Angular但所有的bundle都是静态的以及index-html).除了一件事之外,它的工作原理应该如此.由于某种原因,WOFF文件没有正确曝光.

它远我的谷歌,富云的解决方案是编辑的web.config中类似的方式这个博客或者这个和类似的建议是所有的地方.

这是棘手的部分:我的部署中没有配置.它只是一堆文件(一些HTML,JS和CSS - 以及织补WOFF).如何使Azure应用程序提供所有静态内容,包括WOFF？

因此,mozilla已经提出了一个新的webfont,我不是真正进入那个世界,但我想保持自己up2date.最重要的是,即使微软支持它,为什么我要作为webdev关心呢？

和旧的有什么不同？我们需要另一种字体系统吗？在什么情况下我应该使用WOFF？为什么不坚持现有的？

另外一个名为WOFF的新标签可能很有用.

我们从静态资产中提供一些Web字体(.woff),我想设置正确的mime类型(application/x-font-woff).我尝试这样做config/initializers/mime_types.rb但它没有效果:

Mime::Type.register "application/x-font-woff", :woff

返回的哑剧类型仍然存在application/octet-stream.我甚至试图添加这一行(因为它是rails源中唯一可以找到字符串的地方"woff"):

Rack::Mime::MIME_TYPES[".woff"] = "application/x-font-woff"

但它仍然无济于事.如何正确设置Web字体的mime类型？

在我管理的网站上,我们有几个.woff文件,每个字体一个.为了节省加载时间,我想减少发出的请求数量.是否可以将这些woff文件合并到一个资源中？

我在 Firefox 51.0.1 控制台中收到此错误：

downloadable font: maxp: bad max_zones: 0 (font-family: "t" style:normal weight:normal stretch:normal src index:0) source: data:application/font-woff2;base64,d09GMgABAAAAAADcAAoAAAAAAggAAACWAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABk4ALAoUNAE2AiQDCAsGAAQgBSAHIBtvAcieB3aD8wURQ+TZazbRE9HvF5vde4KCYGhiCgq/NKPF0i6UIsZynbP+Xi9Ng+XLbNlmNz/xIBBqq61FIQRJhC/+QA/08PJQJ3sK5TZFMlWzC/iK5GUN40psgqvxwBjBOg6JUSJ7ewyKE2AAaXZrfUB4v+hze37ugJ9d+DeYqiDwVgCawviwVFGnuttkLqIMGivmDg (unknown)

Chrome 不会显示这一点，而 Safari 会显示几个警告，说明Unexpected CSS token: : woff.css:1:#where#是 4 位数字。我的项目目录中没有 woff.css 文件，只有 woff.json 和 woff2.json，所以我不知道该怎么做。

有任何想法吗？