字体摆弄

I've been trying to stay away from webfonts as much as I can. IMO they are not worth the performance complications. Font loaders, FOUT, yadda-yadda. But... it happens.

我一直在尝试尽可能远离webfonts。 海事组织他们不值得表现复杂。 字体加载器，FOUT，yadda-yadda。 但是...发生了。

讲故事的时间 (Story time)

While showing off another one of my music theory exercises to my prof, he mentioned it would be nice to be able to tell v from V in the Roman Numeral Analysis. Roman capital numbers like I, V, IV, VII etc are best written out with lines on top and bottom to avoid any confusion between upper and lower case.

他向教授展示我的音乐理论练习的另一种方式时，他提到能够在罗马数字分析中从V告诉v是很好的。 最好将罗马大写字母I，V，IV，VII等写在顶部和底部，以免大写和小写之间混淆。

"No problem," I thought, "there should be a Unicode symbol for Roman V I can use". Only I couldn't find any. Then I looked for fonts I can use... nish! But, but... there must exist a music font (or 10). Nope.

我想：“没问题，我可以使用的罗马V应该有一个Unicode符号”。 只有我找不到。 然后我寻找可以使用的字体... nish ！ 但是，但是...必须存在一种音乐字体(或10)。 不。

Luckily, my last semester's prof has started working on a music font. Yey! Not complete yet, but it had the V and I.

幸运的是，我上学期的教授已经开始研究音乐字体。 是的尚未完成，但是有V和I。

一个新的字体子集 (A new font subset)

The lowly byte-counter that I sometimes am, I thought I should subset the font to only use the four characters I want: i, v, I and V.

我有时是低字节计数器，我认为我应该对字体进行子集设置，以便仅使用我想要的四个字符：i，v，I和V。

I found an app called Glyphs with a 30 day trial. I deleted all the characters except the 4 I need. Exported to WOFF because this is the new and shiny web font format. Well, WOFF2 is newer and shinier, but not as well supported yet.

我找到了一个名为Glyphs的应用，并进行了30天的试用。 我删除了除所需的4个字符以外的所有字符。 导出到WOFF，因为这是一种新的闪亮的Web字体格式。 好吧，WOFF2较新且更明亮，但尚未得到很好的支持。

(BTW, the exporting was failing because of some missing "features" of the font, but I managed to find where these features are and delete them all)

(顺便说一句，由于字体缺少一些“功能”，所以导出失败，但是我设法找到了这些功能的位置并全部删除了)

Maybe because the option to export OTF font was just there, or maybe I was blaming the WOFF for the missing "features" that were failing the export, on a whim I exported to OTF too.

也许是因为存在导出OTF字体的选项，或者也许是我也将导出到OTF的异想天开归咎于WOFF导致无法导出的缺失“功能”。

WOFF较小，对不对？ (WOFF is smaller, right?)

WOFF is a compressed format. All other formats should be gzipped when served. So WOFF should always win when comparing disk file sizes, right? Wrong, it turns out, at least in this mini-fontfile case.

WOFF是一种压缩格式。 所有其他格式在投放时都应压缩。 因此，比较磁盘文件大小时，WOFF应该总是赢，对吗？ 事实证明，至少在这种迷你字体文件的情况下，这是错误的。

• OTF: 2,628 bytes (1749 bytes after default Apache gzip setting, 6 maybe?)

  OTF： 2,628个字节(默认的Apache gzip设置后为1749个字节，也许是6个？)

• WOFF: 3,924 bytes (already zipped)

  WOFF： 3,924字节(已压缩)

Well, so much for the new and shiny, I thought. But wait. I remembered using a random online tool to convert OTF to WOFF. Not sure what tool they use behind the scenes. Anyway, tried it.

好吧，我想，对于崭新而又有光泽的事情，就这么多。 可是等等。 我记得使用随机在线工具将OTF转换为WOFF 。 不知道他们在后台使用了什么工具。 无论如何，尝试了一下。

WOFF came out 2,192 bytes.

WOFF出来了2,192字节。

OK, better. Not as great as OTF zipped, but better unzipped.

好更好不像OTF压缩那样好，但是最好不压缩。

Searched some more - a JavaScript tool came up. Nice.

搜索了更多-一个JavaScript工具出现了。 真好

WOFF came out 1,988 bytes.

WOFF出来了1,988字节。

优胜者？ (Winner?)

At this point I was ready to declare the JS tool a winner. But then I tried all these other fonts I converted some time ago, 12 variants of the same font really.

此时，我准备宣布JS工具为赢家。 但是后来我尝试了一段时间前转换的所有其他字体，实际上是该字体的12种变体。

• OTF: 1.8MB
  OTF：1.8MB
• OTF2WOFF: 479KB
  OTF2WOFF：479KB
• WOFF.JS: 679KB
  WOFF.JS：679KB

So the woff.js is not a winner after all. No clear winner really.

因此，woff.js毕竟不是赢家。 确实没有明确的赢家。

有需要 (There's a need)

What have we learned from a random sample of 12 usable font files and one kinda contrived font with 4 characters only? That there's no clear winner when it comes to woff encoders. And we need one. In this day and age there should exist a tool (or 5) we run as part of our favorite build tool, just like we do for images.

我们从12个可用字体文件和一种仅包含4个字符的人工字体的随机样本中学到了什么？ 关于woff编码器，没有明确的赢家。 我们需要一个。 在这个时代，应该有一个(或5个)工具作为我们最喜​​欢的构建工具的一部分运行，就像我们对图像所做的一样。

If you know of one, or better yet, use one, please hit me.

如果您知道其中之一，或者更好，请使用其中之一，请打我。

Jeremy Wagner‏ pointed out Ilya's article that mentions a python tool. Didn't try it (setup look involved), but looks promising.

杰里米·瓦格纳指出了伊利亚的文章即提到一个Python的工具。 没有尝试(涉及设置)，但是看起来很有希望。

Tell your friends about this post on Facebook and Twitter

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

翻译自: https://www.phpied.com/font-fiddling/