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

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

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

STEP 1

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

STEP 2

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

STEP 3

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

STEP 4

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

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