fonten


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

  1. 新增一個Google App Engine (GAE)專案, 假設是 my_gae_project.
  2. 下載並安裝 GAE for Java
  3. 下載 fonten git clone git://github.com/flyakite/fonten.git
  4. 在 appengine-web.xml 中更改 application 的值成 my_gae_project 然後匯入 GAE.
  5. 按 Deploy 上傳到 GAE server。你的server就會是http://my_gae_project.appspot.com/
  6. 到 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