超方便！快速調整網頁排版，一鍵導出CSS代碼的在線工具

如果你曾嘗試過將文字版面調整到最適合閱讀的狀態，就會知道這項工作有多么復雜繁瑣，但不用擔心，科技終究會帶來解決問題的方法，國外就有開發者設計出一款能協助我們設計網頁排版及字型等相關屬性的便利工具。

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

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

Type Anything

STEP 1

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

STEP 2

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

STEP 3

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

STEP 4

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

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

【優設酷站22連發！】

1. 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com