超方便!快速調整網頁排版,一鍵匯出CSS程式碼的線上工具

發表於2016-07-26

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

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

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

Type Anything

STEP 1

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

Type-Anything2016-07-19_1509

STEP 2

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

Type-Anything2016-07-19_1510

STEP 3

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

Type-Anything2016-07-19_1510-2

STEP 4

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

Type-Anything2016-07-19_1515

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

相關文章