Gzip您的@ font-face文件

Adding custom fancy fonts to a web page seems to be all the rage these days. Looking at some examples with Net panel on, I saw some of those font files are 100K which is a pretty big price to pay for an ornament like this. I mean you can build whole pages, with fancy scripts, images, gradients and all, that are less than that size.

这些天来，在网页上添加自定义花式字体似乎非常流行。 看一下Net面板上的一些示例，我看到其中一些字体文件为100K，这对于像这样的装饰要付出很大的代价。 我的意思是，您可以用小于该大小的精美脚本，图像，渐变色以及所有内容来构建整个页面。

Made me wonder about the sizes of those font files and in particular is there an easy gzipping win. Turns out yes - you can and should gzip the custom font files you use with @font-face.

让我想知道这些字体文件的大小，尤其是轻松获得gzipping胜利。 结果是-您可以并且应该gzip与@font-face一起使用的自定义字体文件。

UPDATE Oct 19, 09: Gzip all font files except those in WOFF format, more info...

更新09年10月19日：Gzip除WOFF格式的字体文件外的所有字体文件，更多信息...

快速背景 (Quick background)

In order to include a custom font on a page you can use Paul Irish's bulletproof way, something like:

为了在页面上包含自定义字体，您可以使用Paul Irish的防弹方式，例如：

@font-face {
  font-family: 'gzipper';
  src: url(yanone.eot);
  src: local('gzipper'), 
         url(yanone.ttf) format('truetype');
}
    
body {
    font-family: gzipper;
}

这里发生了什么？ (What's going on here?)

1. You give your custom font a name, like "gzipper"
   您给自定义字体命名，例如“ gzipper”

2. This line is for IE - src: url(yanone.eot);. It asks for an .eot font file

   该行适用于IE- src: url(yanone.eot); 。 它要求一个.eot字体文件

3. This line is for pretty much every other browser url(yanone.ttf) format('truetype'). It needs a .ttf font file

   该行几乎适用于所有其他浏览器url(yanone.ttf) format('truetype') 。 它需要一个.ttf字体文件

4. That last line has variations, you can use an .otf file instead of .ttf, interchangeably, like so url(yanone.otf) format('opentype')

   最后一行有所不同，您可以互换使用.otf文件而不是.ttf，例如url(yanone.otf) format('opentype')

5. SVG font file (for Chrome) is also an option instead of, or in addition to, ttf, like: url(yanone.svg) format('svg')

   SVG字体文件(适用于Chrome)也是ttf的替代或补充，例如： url(yanone.svg) format('svg')

So that leaves us with 4 different types of files:

因此，我们剩下4种不同类型的文件：

• svg
  svg
• ttf
  ttf
• otf
  OTF
• eot
  ot

How about gzipping these?

压缩这些怎么样？

SVG (SVG)

SVG is easy, it's an XML file. XML files are plain text files so they must always be gzipped. Potential savings? Anywhere around (and I'm pulling this off my hat) 30-70%.

SVG很简单，它是一个XML文件。 XML文件是纯文本文件，因此必须始终将其压缩。 潜在的节省？ 周围的任何地方(我正在摘下帽子)30-70％。

特遣队 (TTF)

Turns out TTF is also mostly a text file, and it can safely be served gzipped. I tested FF 3.5, Opera 10, Safari 4, works everywhere. The test page is here.

事实证明，TTF大部分还是文本文件，可以安全地以压缩文件形式提供。 我测试了FF 3.5，Opera 10，Safari 4，可以在任何地方使用。 测试页在这里。

Grabbing some files to test from here and one from here (and having my kid's tae-kwon-do lesson to sit through on this beautiful Santa Monica Saturday morning) I gzipped them and compared the results.

从抓住一些文件，以测试在这里，一个来自这里(和有我的孩子的泰权，做的教训，在这个美丽的圣莫尼卡周六早上坐穿)我gzip压缩他们并比较结果。

On average - 41.48% savings.

平均节省41.48％ 。

font file	plain size, bytes	gzipped size, bytes	savings, %
AllerDisplay.ttf	95,616	47,771	50.04%
Aller_Bd.ttf	128,368	59,884	53.35%
Aller_BdIt.ttf	123,556	58,942	52.30%
Aller_It.ttf	120,876	58,459	51.64%
Aller_Lt.ttf	132,780	60,766	54.24%
Aller_LtIt.ttf	122,296	57,342	53.11%
Aller_Rg.ttf	134,436	63,379	52.86%
FFF_Tusj.ttf	1,543,648	1,008,083	34.69%
MarketingScript.ttf	55,160	25,026	54.63%
Sansation_Bold.ttf	19,644	10,467	46.72%
Sansation_Light.ttf	19,568	10,425	46.72%
Sansation_Regular.ttf	19,480	10,172	47.78%
Ubuntu-Title.ttf	15,108	7,473	50.54%
UglyQua-Italic.ttf	184,300	103,863	43.64%
UglyQua.ttf	120,424	59,502	50.59%
Vera-Bold-Italic.ttf	63,208	38,398	39.25%
Vera-Bold.ttf	58,716	36,644	37.59%
Vera-Italic.ttf	63,684	38,629	39.34%
Vera.ttf	65,932	40,173	39.07%
YanoneTagesschrift.ttf	105,016	59,732	43.12%
daniel.ttf	51,984	35,250	32.19%
danielbd.ttf	63,688	40,701	36.09%
danielbk.ttf	88,760	56,697	36.12%
journal.ttf	130,956	76,506	41.58%

字体文件	普通大小，字节	压缩大小，字节	节省，％
AllerDisplay.ttf	95,616	47,771	50.04％
Aller_Bd.ttf	128,368	59,884	53.35％
Aller_BdIt.ttf	123,556	58,942	52.30％
Aller_It.ttf	120,876	58,459	51.64％
Aller_Lt.ttf	132,780	60,766	54.24％
Aller_LtIt.ttf	122,296	57,342	53.11％
Aller_Rg.ttf	134,436	63,379	52.86％
FFF_Tusj.ttf	1,543,648	1,008,083	34.69％
MarketingScript.ttf	55,160	25,026	54.63％
Sansation_Bold.ttf	19,644	10,467	46.72％
Sansation_Light.ttf	19,568	10,425	46.72％
Sansation_Regular.ttf	19,480	10,172	47.78％
Ubuntu-Title.ttf	15,108	7,473	50.54％
UglyQua-Italic.ttf	184,300	103,863	43.64％
UglyQua.ttf	120,424	59,502	50.59％
Vera-Bold-Italic.ttf	63,208	38,398	39.25％
Vera-Bold.ttf	58,716	36,644	37.59％
Vera-Italic.ttf	63,684	38,629	39.34％
Vera.ttf	65,932	40173	39.07％
YanoneTagesschrift.ttf	105,016	59,732	43.12％
daniel.ttf	51,984	35,250	32.19％
danielbd.ttf	63,688	40,701	36.09％
danielbk.ttf	88,760	56,697	36.12％
journal.ttf	130,956	76,506	41.58％

I couldn't help but notice huge differences between different font files, even in this small sample. Sansation_Regular.ttf is 10K while FFF_Tusj.ttf is 1 Meg! So keep in mind to check the size of the font you're about to use, there might be smaller and similar fonts.

我忍不住注意到了不同字体文件之间的巨大差异，即使在这个小样本中也是如此。 Sansation_Regular.ttf是10K，而FFF_Tusj.ttf是1 Meg！ 因此，请记住检查将要使用的字体的大小，可能会有更小和相似的字体。

场外交易 (OTF)

Same thing, testing with some files found here, the results are 45.40% savings on average when gzipping the .otf font files.

同样，测试此处找到的某些文件后，对.otf字体文件进行gzip压缩后，平均可节省45.40％ 。

font file	plain size, bytes	gzipped size, bytes	savings, %
Diavlo_BLACK_II_37.otf	33,964	25,477	24.99%
Diavlo_LIGHT_II_37.otf	33,404	25,157	24.69%
Fertigo_PRO.otf	52,636	35,498	32.56%
Fontin-Bold.otf	30,460	16,285	46.54%
Fontin-Italic.otf	30,636	16,447	46.31%
Fontin-Regular.otf	30,396	15,870	47.79%
Fontin-SmallCaps.otf	29,308	15,419	47.39%
Fontin_Sans_B_45b.otf	24,984	17,576	29.65%
Fontin_Sans_I_45b.otf	24,772	17,730	28.43%
Fontin_Sans_R_45b.otf	25,564	18,018	29.52%
Fontin_Sans_SC_45b.otf	27,384	18,200	33.54%
GraublauWeb.otf	41,464	31,528	23.96%
GraublauWebBold.otf	44,040	31,999	27.34%
Tallys_15.otf	19,996	16,404	17.96%
YanoneKaffeesatz-Bold.otf	55,568	21,904	60.58%
YanoneKaffeesatz-Light.otf	58,328	24,655	57.73%
YanoneKaffeesatz-Regular.otf	58,528	24,681	57.83%
YanoneKaffeesatz-Thin.otf	58,292	24,324	58.27%
pykes_peak_zero.otf	122,832	32,259	73.74%
vollkorn.otf	30,065	25,173	16.27%

字体文件	普通大小，字节	压缩大小，字节	节省，％
Diavlo_BLACK_II_37.otf	33,964	25,477	24.99％
Diavlo_LIGHT_II_37.otf	33,404	25,157	24.69％
Fertigo_PRO.otf	52,636	35,498	32.56％
Fontin-Bold.otf	30,460	16,285	46.54％
Fontin-Italic.otf	30,636	16,447	46.31％
Fontin-Regular.otf	30,396	15,870	47.79％
Fontin-SmallCaps.otf	29,308	15,419	47.39％
Fontin_Sans_B_45b.otf	24,984	17,576	29.65％
Fontin_Sans_I_45b.otf	24,772	17,730	28.43％
Fontin_Sans_R_45b.otf	25,564	18,018	29.52％
Fontin_Sans_SC_45b.otf	27,384	18200	33.54％
GraublauWeb.otf	41,464	31,528	23.96％
GraublauWebBold.otf	44,040	31,999	27.34％
Tallys_15.otf	19,996	16,404	17.96％
YanoneKaffeesatz-Bold.otf	55,568	21,904	60.58％
YanoneKaffeesatz-Light.otf	58,328	24,655	57.73％
YanoneKaffeesatz-Regular.otf	58,528	24,681	57.83％
YanoneKaffeesatz-Thin.otf	58,292	24,324	58.27％
pykes_peak_zero.otf	122,832	32,259	73.74％
Vollkorn.otf	30,065	25,173	16.27％

EOT (EOT)

The case with .eot is a little more interesting (like anything to do with IE, right?). Apparently MS provides software, called WEFT to create those files, but looks like people have hard time making it work.

.eot的情况更有趣(就像与IE有关，对吧？)。 显然，MS提供了一种称为WEFT的软件来创建这些文件，但是看起来人们很难使它起作用。

The good thing about this tool is that it can create compressed .eot files which is excellent. You can see some examples linked to from this MSDN article. Some of those EOTs in the examples are as small as 4K which is totally acceptable. So it's worth the time to figure it out because it can save quite a bit.

这个工具的好处是它可以创建出色的压缩.eot文件。 您可以从此MSDN文章中看到一些链接到的示例。 示例中的某些EOT小至4K，完全可以接受。 因此值得花时间弄清楚它，因为它可以节省很多时间。

The other option to create EOTs is to use the free open source tool ttf2eot and convert TTFs to EOTs. The tool doesn't create compressed files, so generally the size of the EOT is about the size of the input TTF. In this case you must gzip the .eot before you send it to the browser.

创建EOT的另一种方法是使用免费的开源工具ttf2eot并将TTF转换为EOT。 该工具不会创建压缩文件，因此通常EOT的大小约为输入TTF的大小。 在这种情况下，您必须gzip .eot，然后才能将其发送到浏览器。

So I took my test TTFs, converted to EOT and checked the gzip savings. On average - 41.49% savings when gzipping the uncompressed .eot

因此，我接受了测试的TTF，转换为EOT，并检查了gzip的节省量。 将未压缩的.eot压缩后，平均可节省41.49％

font file	plain size, bytes	gzipped size, bytes	savings, %
AllerDisplay.eot	95,806	47,867	50.04%
Aller_Bd.eot	128,530	60,201	53.16%
Aller_BdIt.eot	123,746	59,034	52.29%
Aller_It.eot	121,046	58,554	51.63%
Aller_Lt.eot	132,962	60,863	54.23%
Aller_LtIt.eot	122,490	57,437	53.11%
Aller_Rg.eot	134,594	63,480	52.84%
FFF_Tusj.eot	1,543,820	1,008,160	34.70%
MarketingScript.eot	55,352	25,105	54.64%
Sansation_Bold.eot	19,820	10,531	46.87%
Sansation_Light.eot	19,748	10,489	46.89%
Sansation_Regular.eot	19,668	10,230	47.99%
Ubuntu-Title.eot	15,298	7,533	50.76%
UglyQua-Italic.eot	184,482	103,965	43.64%
UglyQua.eot	120,594	59,598	50.58%
Vera-Bold-Italic.eot	63,458	38,467	39.38%
Vera-Bold.eot	58,934	36,712	37.71%
Vera-Italic.eot	63,914	38,696	39.46%
Vera.eot	66,142	40,249	39.15%
YanoneTagesschrift.eot	105,274	59,875	43.12%
daniel.eot	52,184	35,358	32.24%
danielbd.eot	63,892	40,815	36.12%
danielbk.eot	88,984	56,816	36.15%
journal.eot	131,180	76,536	41.66%

字体文件	普通大小，字节	压缩大小，字节	节省，％
AllerDisplay.eot	95,806	47,867	50.04％
Aller_Bd.eot	128,530	60,201	53.16％
Aller_BdIt.eot	123,746	59,034	52.29％
Aller_It.eot	121,046	58,554	51.63％
Aller_Lt.eot	132,962	60,863	54.23％
Aller_LtIt.eot	122,490	57,437	53.11％
Aller_Rg.eot	134,594	63,480	52.84％
FFF_Tusj.eot	1,543,820	1,008,160	34.70％
MarketingScript.eot	55,352	25,105	54.64％
Sansation_Bold.eot	19,820	10,531	46.87％
Sansation_Light.eot	19,748	10,489	46.89％
Sansation_Regular.eot	19,668	10,230	47.99％
Ubuntu-Title.eot	15,298	7,533	50.76％
UglyQua-Italic.eot	184,482	103,965	43.64％
丑女	120,594	59,598	50.58％
Vera-Bold-Italic.eot	63,458	38,467	39.38％
薇拉·博尔德	58,934	36,712	37.71％
Vera-Italic.eot	63,914	38,696	39.46％
威罗	66,142	40,249	39.15％
亚诺·塔格斯里夫特	105,274	59,875	43.12％
丹尼尔	52,184	35,358	32.24％
丹尼尔布	63,892	40,815	36.12％
丹尼尔布克	88,984	56,816	36.15％
journal.eot	131,180	76,536	41.66％

I tried my test page in IE6 and it worked with the gzipping, so I'm assuming IE7,8 are fine too.

我在IE6中测试了我的测试页，它与gziping一起工作，因此我假设IE7,8也可以。

概要 (Summary)

• Always send your font files gzipped, average 40% to be won, but could be 70% you never know
  始终将压缩后的字体文件发送出去，平均可以赢取40％，但您可能永远不知道有70％
• Dig into WEFT to make sure you create small, compressed EOTs
  挖掘WEFT以确保您创建压缩的小型EOT
• Keep an eye on the font file sizes you're about to use, they can be huge. When you have a choice, opt in for the 10K font file and not the 1.5 megs one
  请注意您将要使用的字体文件的大小，它们可能很大。 选择后，选择加入10K字体文件，而不选择加入1.5兆字体

链接(links)

• My gzipped fonts test page

  我的压缩字体测试页

• Configure gzip in hosting environments with variable degree of hostility

  在具有不同程度敌意的宿主环境中配置gzip

• Paul Irish on "FOUT" and more on loading font files

  Paul Irish谈“ FOUT”，以及更多关于加载字体文件的信息

• Paul Irish - bulletproof font face declaration

  Paul Irish-防弹字体声明

• Snook's font mastery post

  Snook的字体精通文章

• TTF-to-EOT converter

  TTF到EOT转换器

• WEFT tool for EOTs

  EOT的WEFT工具

• MSDN examples

  MSDN范例

• Free fonts - awesome

  免费字体-很棒

• 10 free fonts

  10种免费字体

• Free fonts

  免费字体

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/gzip-your-font-face-files/