Google Sans Code:免費等寬字型下載與教學,提升程式碼閱讀體驗

Google Sans Code

Google Fonts 近期加入一款全新免費字型「Google Sans Code,這由 Google 與 Universal Thirst 合作打造的新款固定寬度字體,融合了幾何精確性與文藝復興風格的斜體設計,即使在小尺寸的顯示器依然能夠提高可讀性,也是專為提升程式碼閱讀體驗而設計的字型,現在可以從 Google Fonts 即時預覽測試、免費下載字型檔。

為什麼程式碼字型重要?

眾所皆知,開發者在程式碼編輯器或終端機工具經常需要閱讀大量文字,有些字元很容易被搞錯,例如英文字母 i、l、I 和數字 1 或是英文字母的 o、O 和數字 0 等,諸如此類,透過合適的字型可以減少辨識時間,降低可能的錯誤率,最大程度降低閱讀上的視覺雜亂問題,此外,在程式碼編輯器也很常出現特殊符號,Google Sans Code 都有對其進行最佳化設計。

Google Sans Code 的特色

Google Sans Code 包含可變字體(Variable Font)靜態字體(Static Font)兩種格式,如果應用程式不支援可變字體,也有提供傳統的靜態字體檔案(TTF 格式),這款字型提供六種不同的字重:Light、Regular、Medium、SemiBold、Bold 和 Extra Bold,加上斜體變化一共有 12 種樣式。

其他免費等寬字型推薦

免費資源網路社群也介紹過其他的免費等寬字型,例如:

網站資訊

網站名稱:Google Sans Code
網站鏈結:https://fonts.google.com/specimen/Google+Sans+Code

使用教學

操作步驟
預覽與測試字型

開啟 Google Fonts 網站的「Google Sans Code」字型頁面,可以看到不同字重、樣式的實際顯示效果,在網站還可以設定要測試的文字內容、字體大小,點選上方「Type tester」工具開啟編輯器以進行更多更詳細的字型測試。

Google Sans Code

下方還有 Google Sans Code 在不同字重、字體大小的實際呈現樣貌。

Google Sans Code

下載字型檔案

如何下載這款字型呢?很簡單,點選字型頁面右上角「Get Font」就會進入下載頁面,點選右側「Download All」即可下載字型檔案,解壓縮後就會取得 TTF 字型檔。

Google Sans Code

取得網頁嵌入程式碼

如果想要將 Google Sans Code 使用於網頁中,點選「Get embed code」取得嵌入程式碼。

Google Sans Code

安裝字型檔案

下載、解壓縮後會取得可變字體(Variable Font)靜態字體(Static Font)兩種格式,前者包含兩個檔案:

  • GoogleSansCode-VariableFont_wght.ttf(非斜體)。
  • GoogleSansCode-Italic-VariableFont_wght.ttf(斜體)。

如果應用程式支援可變字體,可直接安裝上面這兩個字型檔,不支援的話就進入「static」資料夾安裝靜態字體。

Google Sans Code

Google Sans Code

實際顯示效果

下圖就是 Google Sans Code 實際顯示樣式,符號部分經過特殊設計,保留了活潑的「Google 風格」,而且這些效果在斜體下表現更為突出。

Google Sans Code

值得一試的三個理由:

  • 針對易混淆字元(如 i、l、1)進行最佳化設計,減少閱讀錯誤,提升開發效率
  • 提供 6 種字重與斜體變化,共 12 種樣式,適用於不同程式碼編輯場景
  • 完全免費,從 Google Fonts 網站即可預覽、下載,並有網頁嵌入程式碼
×