2010年9月21日 星期二

簡單談Embed字型到AS檔

簡單記錄一下Embed字型到AS檔的做法。雖然我們可以直接在主要程式裡Embed字型,可是這樣做的話,每次發佈都要多花時間。我試過光是Embed常用的Ariel的數字,發佈時間就要多5秒,這樣會拖慢開發速度。所以這邊介紹的方法分兩步:1.把Embed字型的AS檔單獨發佈成一個SWF檔。2.要用的時候再去Load這個SWF進來。如此一來,只需要花一次Compile的時間,當有多個地方需要用到這個字型檔的時候,也可以去Load同一個SWF檔。

首先來看,如何將需要的字型Embed到一個AS檔,並將它發佈成一個SWF檔。這個AS檔程式碼如下:
package myproject.fonts 
{
  import flash.display.Sprite;
  import flash.text.Font;
  public class TimeFont extends Sprite
  {
    [Embed(systemFont="Arial", fontName = "TimeFont", mimeType = "application/x-font", embedAsCFF = "false", unicodeRange = "U+0030-U+0039,U+002E")]
    public static var TimeFontFontClass:Class;
    Font.registerFont(TimeFontFontClass);
  }
}
在FlashDevelop裡開一個新的Project,然後將這個AS檔設為Always Compile。而這個類別很簡單,Embed我們要的字型到一個TimeFontFontClass,再用Font.registerFont註冊起來,然後發佈成一個SWF,之後Load這個SWF的檔案自然能使用這個字型。接著我們稍微看一下Embed裡面的幾個設定:
systemFont:系統裡面字型的名稱,將字型檔點開來就可以查到字型名稱。只能用True Type字型。如果字型檔沒有安裝到系統字型裡面,也可以使用source去指定完整路徑加檔名。
fontName:可以自行命名的名稱,之後用來指定文字的font屬性用。命名規則有兩種建議,第一用原本的字型名稱去變化,例如ArialFont;或者依用途去命名,就像我這裡因為是顯示時間用的字型,所以命名成TimeFont。
mimeType:就是這樣打,或者是"application/x-font-truetype"。
embedAsCFF:Flex SDK 4.1以後一定要加上這個設定,否則會出不來。
unicodeRange:就是我們要Embed哪些文字進來。U+0030-U+0039是一個範圍,就是數字0~9,後面若還有其他文字或範圍就用逗號隔開,U+002E是小數點。常用的unicodeRange列一些:
英文常用範圍,包含以下所有的加起來。
"U+0020-U+0026,U+0027-U+007E"

大寫英文 A ~ Z 以及空白。
"U+0020,U+0041-U+005A"

小寫英文 a ~ z 以及空白。
"U+0020,U+0061-U+007A"

數字 0 ~ 9 以及小數點。
"U+0030-U+0039,U+002E"

符號以及空白。
"U+0020-U+002F,U+003A-U+0040,U+005B-U+0060,U+007B-U+007E"

基本拉丁字母以及空白。
"U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E"

可惜Embed裡面不能放變數,所以沒辦法把這些字串記錄下來用程式跑。另外如果需要包其它有限個中文字,可以用這個

第二步,在需要用到這個字型檔的AS裡面,用Loader將剛剛這個SWF讀進來,甚至也不需要將Loader加到DisplayList(也就是不需要addChild(Loader)),因為剛剛的Font.registerFont作用的關係。然後假設我們有一個time_txt要使用到這個字型,就使用如下的設定:
var textFormat:TextFormat = new TextFormat();//開一個TextFormat
textFormat.font = "TimeFont";//指定其font屬性為之前Embed字型時的fontName
time_txt.embedFonts = true;//文字框的embedFonts設為true
time_txt.defaultTextFormat = textFormat;//將剛剛的TextFormat設為這個文字框的defaultTextFormat
說明就寫在註解中了。

基本上,一種字型發佈成一個SWF檔,這樣在使用上會有比較大的彈性,需要哪個字型就Load哪個檔案。不過這個方法有個小缺點,就是Load的字型多了,或檔案比較大,就要針對下載進度去做處理。

2 則留言:

  1. 有一套輔助工具提供參考
    漢字嵌入助手
    http://kevincao.com/2010/07/hanfont/

    雖然是簡體版的
    不過匯入繁體字的部份也是ok的
    另外他可以直接幫你產出字型swf檔
    會省上不少事喔^^

    回覆刪除
  2. To Sam:
    這真的超讚的!
    感謝分享

    回覆刪除