Type Anything 從瀏覽器測試建立完美網頁排版，一鍵匯出 CSS 樣式

不怕說出來讓大家知道，其實我對網頁設計很挑剔，尤其在排版方面。如果你經常回來免費資源網路社群，應該會發現這裡更新頻率很高，不單單只有文章內容汰舊換新，連最細節的文字設定我都費盡心思，主要是希望能帶給讀者最好的閱讀感覺。儘管沒有一項設計能符合所有人喜好，我仍在不斷測試、交換中找到最適合大多數人閱讀習慣的排版風格。

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

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

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

網站名稱：Type Anything
網站鏈結：https://typeanything.io/

使用教學

STEP 1

開啟 Type Anything 後，左側是調整工具，右側為預設的文章範本，你也可以把自己的文章複製貼上，透過這項線上服務來進行排版調整，從網頁瀏覽器上即時看到效果。

STEP 2

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

STEP 3

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

• Google Fonts 推出「思源黑體」中文網頁字型，改善網頁文字顯示效果
• 為網站載入 Typekit「思源黑體」中文網頁字型，提升文字顯示質感

STEP 4

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

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

如果你想在自己的網站上即時測試各種排版樣式，那麼可以試試看之前介紹的 Font Fit，或利用 Edit Any Website 一段程式碼來快速編輯任何網頁內容，現在能協助我們設計網頁排版的工具或服務越來越多，趕緊捲起袖子幫自己的網站或部落格改造一下吧！