選單

BLOKK 適合在 Mockup 使用的填充字型,讓視覺效果更貼近真實樣貌

BLOKK 適合在 Mockup 使用的填充字型,讓視覺效果更貼近真實樣貌

如果你是從事網頁開發、平面設計工作的話,應該會很常使用範例文字或圖片來填充設計區域,使 Mockup 或 Wireframe 更貼近完成時的效果。最近我在網路上找到另一個解決方案,透過 BLOKK Font 免費字型可以更快速地為你產生範例文字,這套字型完全免費,而且相當輕巧,主要是把文字轉為類似於方塊的顯示效果,遠遠看起來就有點像是卡通報紙呈現的感覺。

若你還有印象,之前我介紹過「12 個你應該知道的中英文假字、文章產生器」,這通常也被稱為「Lorem Ipsum」,主要在測試文章、或是文字於不同排版下看起來的效果,不過因為拉丁文字跟中文呈現的效果完全不同,我才加入可產生中文假字假文產生器,當你在開發設計時需要使用到一些文字來做為填充用,這工具就能節省你的時間。

不同於使用 Lorem Ipsum 之類的假字假文章範本,BLOKK 直接幫你把填充區域的文字轉為同高度的文字效果,它是一個非常簡單、而且更為聰明的方法,而且完全免費,只要把字型下載後,安裝到你的作業系統即可使用,檔案只有 36 kb 左右,非常小巧。

網站名稱:BLOKK font
網站鏈結:https://blokkfont.com/

使用教學

Step 1

開啟 BLOKK font 網站後,可以稍微預覽一下這個字型使用上呈現的效果,包括在一般桌上型電腦、平板電腦和行動裝置其實都能拿來開發、測試。

BLOKK 開發 Mockup 使用的填充字型,讓視覺效果更貼近真實情況

Step 2

點選下方的 Download Font 即可下載 BLOKK 免費字型,本身包含 .ttf 和網頁字型。

BLOKK 開發 Mockup 使用的填充字型,讓視覺效果更貼近真實情況

Step 3

BLOKK 除了原有的字型(Regular)外,最近也加入了一個 BLOKKNeus,從這兩個資料夾內取得 .ttf 字型檔案並安裝到電腦裡,即可在一般軟體,例如 Photoshop 使用。

除此之外,BLOKK 也提供了在網頁內載入網頁文字的範例,如果你是網頁開發者,可直接在網頁內載入字型,做為開發測試用途。BLOKK 只會在一般英文跟數字產生填充效果。

BLOKK 開發 Mockup 使用的填充字型,讓視覺效果更貼近真實情況

分享本文