Dev Fonts 適合開發者的免費字型下載，線上套用字型預覽程式碼效果

一般的純文字編輯器不一定適合編寫程式碼，透過專業的程式碼編輯工具可針對程式語言上色，在閱讀時更省力，也減少因為誤判造成的問題，最重要的是使用等寬字型（Monospaced Font）閱讀程式碼，有一些字型專門為程式碼編輯器或終端機工具設計，像是微軟的 Cascadia Code、JetBrains Mono、Iosevka 或是 Hack 等等，或許你也有自己慣用的等寬字型。如果想找找其他選項，Programming Fonts 收錄 50 種最適合寫程式的字型也能線上比較。

本文要介紹的「Dev Fonts」從網站名稱就能知道它的用途，主要以收錄開發者會用到的字型為主，寫這篇文章時共 33 種字型，其中不乏我以前介紹推薦過的等寬字型。Dev Fonts 最大特色是可以直接在線上預覽程式碼，選擇不同的編輯器配色、程式語言，也能篩選出特定字型、免費付費或具有連字效果的字型，有些時候連字可以有效平衡空白，減少眼睛處理的時間，不過習不習慣還是要自己看一下才知道。

不同於常見的字型網站，Dev Fonts 不是列出字型的每個字元預覽，而是直接將字型線上套用在某段程式碼上，使用者也可以把一段程式碼貼上取代，選擇特定的編輯器佈景主題配色和程式碼類型，就能找出更符合開發習慣的字型選項。

Dev Fonts
https://devfonts.gafi.dev/

使用教學

STEP 1

開啟 Dev Fonts 後會看到網站收錄的字型列表，這些也都是適合開發者使用的字型（適合瀏覽程式碼的字型），如果想切換預覽模式顯示的配色，可以從「Theme」進行選擇，選取後會直接套用到當前網頁供使用者預覽。

STEP 2

在「Filter fonts」篩選器可單獨搜尋某個字型，或是將字型勾選、加入比較清單，快速比較字型差異。

STEP 3

Dev Fonts 預設會有一段上色的程式碼讓使用者預覽字型，若你偏好其他程式語言，也能將程式碼直接複製貼上取代，記得從右上角「Lauguage」選擇對應的程式碼，就會帶入顏色更接近編輯器的瀏覽效果。點選右下角 Copy code to all 可以將貼上的程式碼複製到所有字型的預覽範圍。

每個 Dev Fonts 收錄的字型會標示價格（大多都是免費）、是否有連字效果（Ligatures），點選字型右上角「Get font」就能連結到該字型網站以下載字型檔案。