Posts tagged CSS

尋日要幫一個 application 做 font embedding
主要係想 embed 楷書
其實 font embedding 本身並唔係一件難事
因為 Flex 本身已經 support~
但係 embed 得黎又要控制好 file size 就唔簡單~!
至於楷書o既問題就更加多…
應該 specific d 講… 係 Microsoft o既標楷體o既問題更加多…

由淺入深~

1) Flex 直接 Embed font

方法主要有兩種

1A) Flex CSS refer local font

@font-face
{
	src: local("標楷體");
	font-family: "KaiShu";
}

o係 CSS 裡面 declare font-face
然後 source 利用 local 指住個字體名
最後 declare 一個 font family 名~ (呢個隨意就得)
呢度最 tricky 係個字體名… 特別係 Mac 機再加埋中文字…
經常攪到 Flex Builder compile o既時候會出現 local build error…

好: 快
壞: 唔穩定, File Size 大

1B) Flex CSS refer font file

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
}

想解決 1A 出現o既問題就要利用 source 指 url 直接指住 font file
font file 大家可以o係唔同地方買或者 download 到
如果o係 system font 的話

Windows 可以o係控制台 > 字型 裡面抄走
Mac 可以o係 System/Library/Fonts 裡面抄走
(Mac 特別要留意副檔名 dfont 的係 embed 唔到架)

好: 穩定~ 準
壞: File Size 大

備註: Embed Microsoft Windows 內置標楷體o既爆字問題

如果大家要 embed 標楷體~ 就千祈唔好用 Windows 裡面o既標楷體
因為 embed 之後o係 Mac 機睇係會出現爆字問題

關於爆字 (字形破碎) o既問題請參考 – 破碎的細明體研究院
http://bbs.bnw.com.tw/conference/viewtopic.php?t=2856

簡單黎講o係 MS 的標楷體 version 太舊 (3.0)
解決方法係去華康科技買返新 d o既 version (latest 5.0) (我試過 2005 年o既 3.10 無問題)

不過用華康標楷體 3.10 最大o既問題係 file size…
MS (4.9Mb) 華康 (27.9Mb)
一個 Flex application 用之前要 download 4.9Mb 已經唔容易… 更何況 27.9Mb…

另外更要特別提一提
Embed 27.9Mb o既字形係好耐同好唔 stable 架
我曾經多次出現 out of memory o既問題…
10 次 compile 得 2 – 3 次成功…
(Mac Pro 都頂唔順… 好難相信… 應該又係 Flex Builder 問題…)

2) Flex 利用 unicode-range 抽出要 embed o既字

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011,U+6211;
}

其實利用 Flex CSS Embed font o既時候係可以透過 unicode-range 抽出某 d 字架
以上面為例就會將 “們” 字同 “我” 字抽出黎啦~!
究竟點解係 5011 同 6211 呢?

其實 5011 同 6211 係 d 字o既 unicode value in HEX
想 get 一個中文字o既 unicode
大家可以用呢個 Chinese to Unicode converter
http://www.chinese-tools.com/tools/converter-unicode.html
記住要將個 result 轉返做 HEX value

如果大家用 Mac o既 Numbers 的話可以用下面呢個 equation

=CONCATENATE("U+",RIGHT(DEC2HEX(CODE("字")),4))

@font-face
{
	src: url("/fonts/標楷體.ttc");
	font-family: "KaiShu";
	unicode-range: U+5011-U+6211;
}

至於呢個係另一種寫法~ 將 5011 至 6211 所有字都 embed~
當然大家可以 combine comma “,” 同 dash “-” 兩種寫法啦~!!

好: 要用o既字先 embed~ 有效控制 file size
壞: 煩… 要逐粒字加都幾浪費時間…
更壞: Flex Builder 應該有 bug… 當 unicode-range 後面太多野會出現 compilation error…

3) Flash + Flex Combo = 無敵~!

試左一整日… 放棄左一輪之後… 突然諗到o既絕技~!
Flash + Flex Combo

首先利用 Flash dynamic text field 寫低需要o既字

記住要揀埋你需要o既 font
跟住 set dynamic text field o既 font embedding

然後揀 Auto Fill~
一下就掂晒~!

然後 Export SWF file~
最後 Flex embed SWF file

@font-face
{
	src: url("/fonts/font.swf");
	font-family: "DFBiaoKaiShu-B5";
}

留意 font family 一欄今次唔可以隨便填
一定要同 Flash 裡面寫o既完全一樣
以我上面 example 為例就係 DFBiaoKaiShu-B5

之後就可以 compile 啦~!

好: 快 準 穩定
壞: 要開多一個 application… =.=