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

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

當(dāng)調(diào)整到你覺得最舒服的排版后，一鍵將 CSS 程序代碼輸出就能套用至自己網(wǎng)站。

STEP 1

開啟 Type Anything 后，左側(cè)是調(diào)整工具，右側(cè)為默認(rèn)的文章模板，你也可以把自己的文章復(fù)制貼上，透過這項在線服務(wù)來進(jìn)行排版調(diào)整，從網(wǎng)頁瀏覽器上實時看到效果。

STEP 2

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

STEP 3

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

STEP 4

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

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

最新評論