當今天在製作網頁時，字型就無法像平面一樣，標體用粗黑體、內文用細黑，相當的有變化性，但在網頁的世界裡，只有那101個字型就是大家所熟悉的新細明體，雖然說CSS3可將字型嵌入到網站中，但一個中文字型動不動都5、6MB左右，因此一旦將文字嵌入網頁中，則是一個悲劇的開始，就會發現網頁一直轉不斷的在Loading，所以之前也曾分享《justfont 雲端字型》，來解決網站的字型問題，但justfont無論是免費還是付費版，流量限制的相當的緊，因此一不小心就很容易超過它的範圍，但說真的網頁也不適合用太多花俏的字型，其實只要擁有中黑其實就很夠用了。 　　雖然說可透過CSS來指定字型，當電腦有裝此字型時，就會直接套用，所以大家最常使用的就是微軟中黑體，但若電腦未安裝此字型時，一樣只會無奈的顯示新細明體，而先前曾分享過Adobe與Google一同推出思黑體，雖然可嵌到網站中，但中文字型檔真不是開玩笑的大，所以並未大量的被採用，其實Adobe本身就有推出雲端字型，除了可將字型同步到Adobe的相關軟體中外，也可將這些字型應用於網站中，同時免費版本，每月有25,000的pv限制，但這對於大部分的中小企業而言，相當的足夠，若為付費會員，那每月的流量可到50~100萬，同時不限網站數，雖然目前繁中字型只有思源黑體，但梅干個人覺得也己相當夠用了，因此想讓網站擁有不同字型的朋友，一塊來看看怎麼使用Adobe Typekit到網站中吧!

---

Adobe Typekit：

---

Step1
當進入Adobe Typekit官網後，可先點右邊的web鈕，將可用於網頁的字型篩選出來，雖然說目前中文字型只有一個，但裡面有相當多的英文字形，接著將滑鼠移到文字上方，再點一下文字縮圖。

---

Step2
接著就會秀出該字型的細、中、粗.....等變化，當要使用此字型時，需註冊為Adobe會員，若已有Adobe ID時，直接點右上的SIGN IN來登入。

---

Step3
再輸入Adobe ID的帳密。

---

Step4
當登入完成後，在字型右上角就會出現Use Fonts鈕。

---

Step5
點一下後，再將頁籤切到Web，並點下方的creat a new kit。

---

Step6
接著再命名這個文字的名稱，以及要使用的網域有那些。

---

Step7
再把輸入框中的script貼到</body>結尾前方， 並按Continue鈕。

---

Step8
接著就可選擇所需文字的樣式，是要細的、粗的、正常的，就可以從下方一一的勾選起來，勾好後再按右下的Publish鈕，將此字型發佈出來。

---

Step9
這時就會開

---

Step10
當發佈好後，再點左上角的區塊，就會跳出CSS的文字指定方式，分別再把CSS加到網頁的css樣式中，這樣就大功告成囉!

---

Step11
而梅干也將梅問題講堂，套用了此字型，因此各位也可到梅問題講堂看實際的應用狀況http://class.minwt.com，這時不得不給Adobe一個讚，真是佛心來著，讓網頁突破冏境不再只有新細明體，因此下回在幫客戶設計網頁時，不妨可參考一下囉!

　　說到css preprocessor大家可能比較熟悉SASS或LESS，透過SASS或LESS可讓一些重覆的屬性，可透過變數的方式來完成，但要要使用SASS時，則需要安裝RUBY才能執行，而LESS則需要使用note.js，但無論是SASS還是LESS，在撰寫上也較嚴謹，一切都要符合它的邏輯與結構，因此這對於設計人員，則會感到有些棘手，而那天有好友強力的推薦梅干使用Stylus，不但寫法相當的自由與隨性，更棒的是若會寫SASS的朋友，也可在直接使用，因此在寫作上更加的自由，但要如何讓Sublime Text也支援Stylus呢?現在就一塊來看看吧!!

---

Step1
首先，開啟Sublime Text，接著按Ctrl+Shit+P鍵，再打Install Package。

---

Step2
再輸入Styluss。

---

Step3
這樣就安裝完畢了。

---

Step4
接著開啟新檔案，再點右下角選擇文件格式，就可看到Stylus。

---

Step5
這時就可開始寫Stylus，同時再將它進行儲存。

---

Step6
這時再把Stylus放在Prepros就可自動進行Compiler。

---

Step7
這時只要進行儲存，就會自動將stylus轉成css，同時可看到在stylus中，不但支援所有SASS的寫法外，也可直接在stylus中直接寫css，也可正常的打包與轉成css，因此這對於熟悉css的朋友，相當的方便，完全不用擔心要重新學習，更加的容易上手。

---

Step8
在剛的混寫也可正常的輸出css檔，是不是超隨性的呀!因此若想縮短css的寫作時間，又不想重新學習的朋友，stylus不妨可參考看看。

---

看更多的stylus用法：https://learnboost.github.io/stylus/