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

看板Web_Design作者evenwu (EvenWu)時間14年前 (2011/07/16 21:23)推噓5(5推 0噓 6→)

留言11則, 7人參與討論串1/1

最近在網路上流傳的一張圖 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

07/16 22:48, , 1^F

07/16 22:48, 1^F

推

Isacat

07/16 23:01, , 2^F

07/16 23:01, 2^F

推

uice

07/17 00:12, , 3^F

07/17 00:12, 3^F