網頁

2014年8月4日 星期一

換個好字型讓程式開發有效率

之前在 twMVC #15 所講的主題是「開發的效能與效率」,其中說明了很多有關如何讓我們的開發效率有所提升的方法,當然這些提供給各位的方法其實是見仁見智,最主要的還是需要開發者能夠多瞭解開發工具「Visual Studio」並且將其調整到最適合我們開發的狀態,這麼一來就可以達到提高開發效率之目的,

開發的效能與效率 - twMVC#15

而在這一次的研討會裡我沒有說到的內容就是「字型」,這個部分在 ASP.NET MVC 的課程裡一定會提到,講得直白一點就是「好的字型讓我們開發效率上天堂,不好的字型讓我們寫 Code 眼睛會脫窗」,因為當我要使用別人的電腦去解決他們的問題時,一看到 Visual Studio 仍舊使用預設的「細明體」我就會很難受,如果時間允許而且他們同意的話,我都會多事地幫他們更換字型,至少在找尋程式問題的時候可以讓眼睛舒服一點,而且可以明確的辨別出「字」。

之所以會寫這一篇,主要是看了這一篇文章「適合程式設計師編寫程式的免費等寬字型(Monospaced Font)整理 | G. T. Wang」,當然裡面的字型並非都適合 Visual Studio 也不是都適合每個程式開發人員,但是開發者每天面對數量龐大而且密密麻麻的程式碼,如何舒服地閱讀就是值得關注的重點,而要讓我們可以舒服地閱讀並且有效率的編輯程式,就是要從選擇好的字型開始。

 


每當我需要到別人的電腦裡去幫忙解決問題的時候,要是看到以下的 Visual Studio 畫面,總是讓我開始皺眉頭,並不是說有什麼嚴重的瑕疵而讓我無法閱讀,就很單純的讓我無法舒適地閱讀,

image

image

Visual Studio 預設編輯器所使用的字型與大小如下:

字型使用細明體,然後字型大小為 10

image

請注意一下我用紅線所框起來的地方,請各位睜大眼睛去辨識裡面何者為 O、何者為 0 (零)、何者為 1、何者為 l (小寫的 L ),因為在選擇字型的選項裡是將這些字給列出來,所以我們只要稍加辨識與確認就可以知道各為什麼字,但如果是散在程式碼的各處時,要如何確認呢?

 

更換字型「Consolas」

在使用者沒有安裝其他字型的情況下,我會建議開發者把原本 Visual Studio 裡編輯器所預設使用的字型更改為「Consolas」,並且也將字型大小由原本的「10」調大一些(依據電腦螢幕的解析度來決定),這個時候就會有很大的不同,可以看到 o O 與 0 (零) 在顯示就有不同,但是 1 與 l ( L 小寫 ) 還是蠻類似的,

image

現在再看看編輯器的程式碼,換了字型以及調整了大小之後,在閱讀的舒適度上就有很大的改善,在密密麻麻的程式碼更可以看出不同,

image

image

 

也許有人會說這是因為字型大小不同的關係,如果我們一樣使用預設字型「細明體」並且將字型大小調整為相同的「14」來看看…… 我會說,這是一場災難,很不舒服呀~~

字型「細明體」大小「14」

image

這種不舒服的感覺在深色主題裡更加嚴重

image

 

如果同樣的深色主題,將字型更換為 Consolas,這種的不舒服感就會獲得舒緩,

字型「Consolas」大小「14」

image

 

更換字型「YaHei Consolas Hybrid」

之前幾年我是使用 demo Fan 他所提供的字型來作為開發時編輯器的使用字型,這是一種將中文字形更換為雅黑體然後英文字型混和 Consolas 使用,這幾年我在 Visual Studio 裡所使用的字型就是這一個,

程式設計師該用的字型 | demo小鋪

image

 

更換字型「Adobe Source Code Pro」

最近則是改用了其他的新字型「Adobe Source Code Pro」

Adobe - Fonts : Source™ Code Pro

image

字型下載位置:http://sourceforge.net/projects/sourcecodepro.adobe/files/

單純下載字型的話,就下載圖裡所標示檔案「SourceCodePro_FontsOnly-1.017.zip」即可

image

下載後的檔案裡有多個字型檔案,這邊可以選擇安裝 TTF 目錄下的字型

image

TTF 目錄下的字型粗細各有不同,可以依照自己的習慣與喜好來做選擇,像我的話,我所選擇使用的是「Soruce Code Pro - Medium」的字型,這種字型稍微粗一些,但又不會太細,與 Consolas 的字體粗細類似。

下圖裡可以看到範例所顯示的字,可以明確辨識出各種字的不同,不需要讓開發者還要另外去花時間去做多餘的辨別,尤其是在「l ( L 小寫 )」這個字母,特意在字尾做了變化,與數字 1 有了明顯的不同,如此可以減少錯認的次數。

image

image

image

 

如果再加上使用了我曾經介紹的「Studio Styles - Visual Studio color schemes」,那麼就可以為自己打造一個更加舒適的開發環境,

Visual Studio 2013 佈景主題與 Code Style 

Studio Styles - Visual Studio color schemes

image

私心推薦「Monokai Bright - Sublime

image

 

使用 Adobe Source Code Pro - Medium 字型並且使用 Monokai Bright - Sublime 的 color style,整體的閱讀與編輯程式舒適度就提高了不少,那麼也就會讓開發效率跟著提升囉。

image

 

2014-08-07 更新

這一篇沒有特別的宣傳或是主動貼到社群頁面,但看著按讚與 Plus 的數字一直往上竄升,所以就重新擷取圖片,希望能讓看到這篇文章的朋友可以更加瞭解選擇一個好的字型對於程式開發是有多麼地重要。

下面在分別將各種字型所呈現的結果排列在一起,讓大家可以直接做個比較。

(Default) 細明體, Font-Size: 10

image

細明體, Font-Size: 14

image

Consolas, Font-Size: 14

image

YaHei Consolas Hybrid, Font-Size: 14

image

Adobe Source Code Pro Medium, Font-Size: 14

image

 


雖然有深度近視,但是年輕的時候在開發程式時就不會考慮這麼多,剛開始接觸 ASP.NET 時,用 Visual Studio 來編輯程式都不會去調整編輯環境,一切都是使用預設值,一天將近十個小時長時間盯著螢幕看,白色底的編輯背景色,那時候還覺得沒有什麼,但卻忽略白色底是很傷眼睛的,長時間下來就會開始覺得寫程式的時候眼鏡會覺得特別累,然後就是常常會看錯程式碼,還好及早正視這個問題,趕快換掉字型以及編輯器的 color schema,讓眼睛處於舒適的環境,讓眼睛不要太累,畢竟眼睛可是程式開發人員重要的器官。

當然能減少盯著電腦螢幕的時間才是保護眼睛的上上策,但這就攸關如何用更快且更有效率的方式來開發程式了。

 

相關連結

開發的效能與效率 - twMVC#15

適合程式設計師編寫程式的免費等寬字型(Monospaced Font)整理 | G. T. Wang

程式設計師該用的字型 | demo小鋪

Adobe - Fonts : Source™ Code Pro

Visual Studio 2013 佈景主題與 Code Style 

Studio Styles - Visual Studio color schemes

 

以上

14 則留言:

  1. mrkt大大您好

    Adobe - Fonts : Source™ Code Pro似乎沒有辦法直接下載了
    只能使用github下載
    我在github頁面,按Download ZIP
    下載好的文件路徑source-code-pro-master\Roman\Medium裡可以找到font.ttf
    試著安裝並且在VS設定好之後
    發現顯示的文字跟您的不一樣
    l(小寫L)依然跟1(數字)差不多...l(小寫L)尾端沒有捲曲
    麻煩您解惑迷津
    感恩!!

    回覆刪除
    回覆
    1. 因為你所下載的字型並不是 Source Code Pro 呀
      我也是現在才知道字型已經被 Adobe 給移除了,但是沒有講把字型給放到哪裡去了,
      現在移到 Github 只是說把字型專案給移過去,而並沒有把字型給一併搬過去,
      我手邊也沒有這個字型檔案了,努力 Google 一下應該就可以找到。

      刪除
    2. http://www.1001freefonts.com/source_code_pro.font

      刪除
    3. 感謝Kevin大大的回應
      目前下載已經可以使用了 :)

      刪除
    4. 我還真的沒有預料到 Adobe 會把 Source Code Pro 字型下載給移除掉....

      刪除
    5. Kevin 大:
      剛剛查了 demo 大文章 http://demo.tc/Post/324,有查到 github 載點
      https://github.com/adobe-fonts/source-code-pro
      TTF 目錄下的字型:https://github.com/adobe-fonts/source-code-pro/releases/tag/1.017R
      :)

      刪除
    6. 原來要到那邊去才能找到下載的連結位置,感謝阿砮的通知。

      刪除
    7. Kevin 大客氣了,感謝好文分享 XD

      刪除
  2. 作者已經移除這則留言。

    回覆刪除
  3. 細明體在大小10其實是很清楚的,只是太小
    但放大一點又會讓比例變得奇怪,
    要設到15,比例才會跟10一樣。
    但還是會怪怪的,因為線條沒有加粗,空隙變多。
    要調到17字線條粗細才會跟著翻倍。
    另外,我覺得細明體用10,把縮放開到160%,看起來也不錯。

    看慣了實線的細明體,那些ClearType的字型,就會覺得它們在暗色背景時,邊緣糊糊的。
    Windows的ClearType調過好多次了,是會改善但還是有糊糊的感覺。
    得稍微調高螢幕銳利度才比較好。

    (以上是1080P螢幕、系統DPI(縮放層級)沒有調整的情況下)

    回覆刪除
    回覆
    1. 因為新細明體是實線字阿,沒有模擬字線寬對非整數像素點的混色邊緣。
      描繪線寬會直接捨入,顯示出來就是一條實線,整個字都是同一個顏色。
      缺點就是一些字型大小和線寬的比例會有問題,空白處會過多。如您所設定的14。

      而ClearType字如您所提的Source Code Pro,會有非純色邊緣,模擬小數點像素的線寬。
      我試了好幾次,都覺得這種字看起來不銳利、有點模糊,不習慣。

      說得不好懂,看圖可能比較清楚:
      放大500%的 新細明體10,整個字都是同一個顏色
      http://i.imgur.com/z3sckcd.png
      放大500%的 Source Code Pro M,會有過渡邊緣
      http://i.imgur.com/CwMxQ2K.png

      我也覺得新細明體的字型設計不能算很好看,但一直換不掉阿

      刪除
  4. 不是什麼大問題,這段文字
    ====================
    TTF 目錄下的字型粗細各有不同,可以依照自己的習慣與喜好來做選擇,像我的話,我所選擇使用的是「Soruce Code Pro - Medium」的字型,這種字型稍微粗一些,但又不會太細,與 Consolas 的字體粗細類似。
    ====================

    但當我複製 "Soruce Code Pro - Medium",刪除空格後使用 Ctrl+F 搜尋,發現怎麼找不到

    裡面的 Soruce Code Pro - Medium
    應該是 Source Code Pro - Medium
    Source 拚錯了...

    原本是因為在 Ubuntu 中發現中英文高度沒對齊,
    後來找了 YaHei Consolas Hybrid,
    但發現他的中英文高度雖然對齊了,英文也是等寬,
    但1個中文不等於沒對齊2個英文,

    正在找
    * 中英文對齊,2個中文=2個英文
    * l (小寫 L)、I (大寫 i ) 以及 1 (數字) , 0 (數字)、o 以及 O 要容易分辨
    * 不同平台下效果一致

    還沒找到兼具上述特點的...= ="

    回覆刪除