fonten

為什麼用 fonten ？

fonten是一個即時線上切割字型檔案的工具，在你安裝了fonten server之後，你可以先上傳字型檔，之後根據需要的文字即時產生對應的字型檔，尤其像是中文，字型檔動輒10~20MB，如果我們只需要轉換幾個字，那切出來的檔案大概只有幾KB，是原本的千分之一的大小，因為只有指定的文字的字型被包在新的字型檔裡。這個專案是開源的，你可以自由的改造他來符合你的需求。

如何使用？

精確的說，fonten有一個server端提供動態字型和一組API與client互動。你需要架設你的fonten server然後上傳已經授權的字型到這個server來提供服務給自己的網站。我們沒有一個集中化的server，我們也不會提供原始字型。你可以免費使用Google App Engine/Java來架設你的fonten server，並且不用擔心，你不需要會寫Java。有關GAE免費額度

使用範例

  @font-face{ 
    font-family: myfont; 
    src: url('/font?id=opensans&text=一些文字&format=eot'); 
  }

安裝 fonten server

新增一個Google App Engine (GAE)專案, 假設是 my_gae_project.
下載並安裝 GAE for Java
下載 fonten git clone git://github.com/flyakite/fonten.git
在 appengine-web.xml 中更改 application 的值成 my_gae_project 然後匯入 GAE.
按 Deploy 上傳到 GAE server。你的server就會是http://my_gae_project.appspot.com/
到 http://my_gae_project.appspot.com/fontlist 上傳你的字型檔

簡易API (GET API)

如果沒有需要很多字要轉換字型可以使用簡易版API，一般要少於2000字，中文編碼後大概要少於200字才能符合 IE的URL限制。
連到你的server的 /font 並且包含下列參數:

id: 字型id，這是你上傳完整字型檔的時候指定的
text: 需要的文字，如果你能先讓這個這些文字不重複和排序就更好了，因為同樣的GET request可以被快取。
format: 字型格式，可以是"eot"或"woff"，如果你沒有指定，那就是你原本上傳的字體類型。(optional)
strip: 去掉字體微調(hinting)，通常是truetype font(.ttf)會有的，預設會去掉，設為"0"代表不要去掉。(optional)

範例 css:

 

  @font-face{
    font-family: myfont;
    src: url('/font?id=opensans&text=中文&format=eot');
    src: local('☺'); 
    src: url('/font?id=opensans&text=中文&format=woff'') format('woff');
    src: url('/font?id=opensans&text=中文') format('truetype');
  }

進階API (POST API)

如果你有很多字需要轉換的話可以使用進階API，
先發一個 POST request 到你的server的 /reserve 並且包含以下參數:

text: 要轉換字型的文字

範例 javascript:

  $.ajax({
    type: 'POST',
    url: options.server + '/reserve',
    crossDomain: true,
    data: {text: text},
    dataType: 'json',
  });

然後 request 到 /font 並且包含簡易版API參數(不包含text)和以下參數:

token: POST預約得到的token

  var fontURL = "http://fonten-demo.appspot.com/font?id=opensans&token=" + reservedToken

jQuery 外掛

使用 jQuery 外掛來改字型與fonten server互動會比較簡單 (原始碼)
使用範例 1:

  $('#selector').fonten({
    id: 'opensans'
  });

fonten jQuery 外掛選項:

id

字型ID，上傳字型到你的fonten server時定義的。字型ID也可以定義在html標籤的屬性裡。

  <div class="fonten" data-font-id="opensans">OpenSans</div>
  <div class="fonten" data-font-id="droidsans">DroidSans</div>

server

fonten server URI，預設指到目前所在頁面。使用範例: "http://myfonten.appspot.com"

fontPath

字型在fonten server路徑，預設是"/font"

reservePath

字型在fonten server預定路徑，預設是"/reserve"

strip

是否去掉字體微調(font hinting)，預設是true，可以設成0或false

success

回呼函數，當指定字型被成功載入時呼叫

error

回呼函數，當指定字型載入失敗時呼叫

使用範例 2:

  $.fonten({
    fontTextDict: {
      'opensans': 'ABCD'
    },
    success: function(fontID, fontFamily){
      console.log('成功了 可以開始畫canvas了');
    }
  });

fontTextDict: 有時候我們不是想要改變頁面上文字的字型，我們只是需要某些文字的字型被載入進來，這時候可以使用fontTextDict這個font ID和text文字的對應，把它餵給$.fonten來讓指定文字的字型載入進來。

立足點

這個專案是基於Google開源專案sfntly並且使用Google App Engine/Java架設。

開發者

Shih-Wen Su
sushi@summeridea.com
github

License

Apache 2.0