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

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

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

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

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

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

使用教學

STEP 1

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

Dev Fonts

STEP 2

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

Dev Fonts

STEP 3

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

Dev Fonts

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

Dev Fonts

值得一試的三個理由:

  1. Dev Fonts 收錄適合開發者使用於程式碼編寫或終端機字型
  2. 直接線上預覽程式碼效果,也能選擇不同配色主題
  3. 每個字型皆會標示免費或是否有連字效果
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6251