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。 海事組織他們不值得表現(xiàn)復(fù)雜。 字體加載器，FOUT，yadda-yadda。 但是...發(fā)生了。

講故事的時間 (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.

他向教授展示我的音樂理論練習的另一種方式時，他提到能夠在羅馬數(shù)字分析中從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應(yīng)該有一個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.

幸運的是，我上學期的教授已經(jīng)開始研究音樂字體。 是的尚未完成，但是有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.

我有時是低字節(jié)計數(shù)器，我認為我應(yīng)該對字體進行子集設(shè)置，以便僅使用我想要的四個字符：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的應(yīng)用，并進行了30天的試用。 我刪除了除所需的4個字符以外的所有字符。 導(dǎo)出到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)

(順便說一句，由于字體缺少一些“功能”，所以導(dǎo)出失敗，但是我設(shè)法找到了這些功能的位置并全部刪除了)

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.

也許是因為存在導(dǎo)出OTF字體的選項，或者也許是我也將導(dǎo)出到OTF的異想天開歸咎于WOFF導(dǎo)致無法導(dǎo)出的缺失“功能”。

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是一種壓縮格式。 所有其他格式在投放時都應(yīng)壓縮。 因此，比較磁盤文件大小時，WOFF應(yīng)該總是贏，對嗎？ 事實證明，至少在這種迷你字體文件的情況下，這是錯誤的。

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

  OTF： 2,628個字節(jié)(默認的Apache gzip設(shè)置后為1749個字節(jié)，也許是6個？)

• WOFF: 3,924 bytes (already zipped)

  WOFF： 3,924字節(jié)(已壓縮)

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轉(zhuǎn)換為WOFF 。 不知道他們在后臺使用了什么工具。 無論如何，嘗試了一下。

WOFF came out 2,192 bytes.

WOFF出來了2,192字節(jié)。

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

好更好不像OTF壓縮那樣好，但是最好不壓縮。

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

搜索了更多-一個JavaScript工具出現(xiàn)了。 真好

WOFF came out 1,988 bytes.

WOFF出來了1,988字節(jié)。

優(yōu)勝者？ (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工具為贏家。 但是后來我嘗試了一段時間前轉(zhuǎn)換的所有其他字體，實際上是該字體的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個字符的人工字體的隨機樣本中學到了什么？ 關(guān)于woff編碼器，沒有明確的贏家。 我們需要一個。 在這個時代，應(yīng)該有一個(或5個)工具作為我們最喜??歡的構(gòu)建工具的一部分運行，就像我們對圖像所做的一樣。

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的工具。 沒有嘗試(涉及設(shè)置)，但是看起來很有希望。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告訴您的朋友有關(guān)此帖子的信息

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

總結(jié)

以上是生活随笔為你收集整理的字体摆弄的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。