用戶體驗現(xiàn)在作為很多工作的重中之重，設計師們更要把用戶體驗放在第一位，如果你曾經嘗試過想把你的板面調整到最適合閱讀的狀態(tài)，就會知道多么令人抓狂。但是懶人總是會創(chuàng)造出新科技，國外開發(fā)者為我們帶來了今天要講的協(xié)助設計網頁排版及字型等相關屬性的便利工具。

Type Anything 前段時間登上國外媒體網站后深獲好評，這是一項非常方便的在線工具，功能設計很簡單，主要提供一段文章模板（里頭包含 H1、H2 標題和文字），用戶透過快速按鈕來切換字型、文字大小、行高、字重、邊緣等相關屬性，預覽效果。

當調整到你覺得最舒服的排版后，一鍵將 CSS 程序代碼輸出就能套用至自己網站。

STEP 1

開啟 Type Anything 后，左側是調整工具，右側為默認的文章模板，你也可以把自己的文章復制貼上，透過這項在線服務來進行排版調整，從網頁瀏覽器上實時看到效果。

STEP 2

它跟一般的文本編輯器有點相似，選取文字段落后可將它切換為 H1、H2 或 H3 標題，或加入粗體、斜體及底線效果，在設定完標題及內文位置后，利用左側來進行樣式編輯。

STEP 3

Type Anything 能切換調整不同的字型組合，輸入字型名稱就能實時搜尋 Google Fonts 里收錄的免費字型，不過這里目前還無法使用中文字型，因此你可以先選擇任一字型，最后導出 CSS 后再進行細部修改。提供免費的中文網頁字型服務包括：

STEP 4

從 Type Anything 左側工具欄來進行排版的細節(jié)調整，包括字號、字重、行高、透明杜、頂部距離、底部距離、字距和全部顯示為大寫小寫等設定值。

最后，點選右上角的「Get the Code」就會產生剛才的排版 CSS 樣式表單，之后應該知道該怎么做了吧？此外，Type Anything 會加載由 Google Fonts 提供的網頁字型，若你是使用中文字型，可以將它做適當調整。

最新評論