[心得] 中文 web fonts 最新示範

[evenwu (EvenWu)]

最近在網路上流傳的一張圖

http://twitter.com/#!/wenli/status/91759291853316096

雖然有點政治化，不過這個排版簡單中又有困難的地方
似乎可以拿來測測網頁有沒有辦法做到！

剛好前陣子注意到兩個跟字體有關的網站

一個是CT-BOX http://www.ct-box.net/
很希望可以合作弄一些漂亮的demo出來
不知道有誰可以連絡上他？！（我曾寫了信但沒下文）

另一個是 http://letteringjs.com/
這是一個會自動分割字母的jquery plugin，讓你好調整每個字母的位置或大小

所以我就拿上面這兩樣工具來用做出了那個白賊貼紙的網頁

http://evendesign.tw/demo/bai/

原始碼裡面可以看到 $('h1,.slogan1,.slogan2,.ex1,.ex2').lettering();
這個就是把那些媽的媽的、好像本來就有病痛的字都用<span class="char#">切開
讓我慢慢用絕對座標去調整位置跟size

然後 $('.feature').lettering('lines');
這個是把下面白賊的功能列表弄成像是文字塞入圓框的感覺
其實他是判斷<br>去做分割，會產生出<span class="line#">的標籤
讓我去用margin調整每一行的位置！

歪斜用的是 transform: rotate(角度)
因為用的是 compass 來撰寫，所以很輕鬆的幫我產生了各種browser的prefix

最後加了點動態
用的是 transition(秒數)
跟 transform 位移或旋轉

至於圓形的文字path用的是這個網站的產生器
http://csswarp.eleqtriq.com/

其實他用的方法也是產生一大堆transform的分割文字
只是說自動算給你真是輕鬆多了...
套一套就完成這個網頁

所以我覺得現在中文的字體，對於網站來說
應該是沒有字體太大的問題了

開啟大概兩三秒內都可以載入完畢

目前剩下的問題是一個頁面如果有太多中文字可能會漏字
不過若用在大標題上，綽綽有餘！

另外還有一點是商業字型仍然沒有意識要加入這場網路革命...


--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 114.34.100.58
推 oj113068:推:p
推 Isacat:實驗性質很強的有趣範例...存下來以後接案說不定可以玩玩看
推 uice:推
→ superpai:不知道字型多少k.. 開developer tools看不到
→ evenwu:字體好像是用base64傳送 21326(粗黑)4677(粗明)字元
→ evenwu:好像又不是，總之是類似這樣的檔案ct1_17dd606b8dea.aspx
→ evenwu:直接是ttf header
推 Rplus:好帥~
→ superpai:原來是那兩個.aspx，那真是非常小
→ superpai:最大的檔案是facebook的js XD
推 ilovekebi:讚!