字體是視覺設計中很重要的一個部分，各種繪圖軟體如 Photoshop 以及 Illustrator 都提供了相當強大的文字編輯工具，可以隨心所欲的製作出各種文字編排。而當我們在使用文字輸入工具時會注意到有一個文字反鋸齒的選項：
針對這個功能，Adobe 原廠對於 Photoshop 的文字反鋸齒說明如下：「消除鋸齒可經由將邊緣像素部分填滿，製造出邊緣平滑的文字，如此一來，文字的邊緣就可以與背景混合。 」
選用不同的設定會直接影響文字的外觀，如下圖：
（中文字為黑體 - 繁 - 細字，英文字為 Helvetica Neue - Regular，字集為 18 px，使用 Photoshop CS6 輸出）
由於 Photoshop 具有強大的即時預覽繪圖機能，因此設計師可以直接在畫面上檢視反鋸齒的效果，並且直接挑選適合的反鋸齒效果使用。
而當今天我們進行的是網頁設計的專案時，設計稿中使用文字的部分（如果最終不是直接將文字輸出成圖片）其渲染以及反鋸齒工作則是交由瀏覽器端負責。這時候常常會遇到的問題就是網頁設計稿與最終完成品不一致的情況。
最常出現的狀況：字體大小與設計稿標示不一致
在 Photoshop 以及 Illustrator 中設定文字尺寸時（其實連文書軟體都是）預設是使用 pt 為字級單位，而當繪圖軟體預設為 72dpi 的情況下，1 pt 的值恰好等於 1px。因此在製作設計時僅需要確認自己使用的字級尺寸，並且在傳達的時候提醒前端人員使用 px 做為設定字集的單位即可。有關於 pt 與 px 的關係與換算，可參考【他真的不是我兄弟：像素跟點大不同】一文。
繪圖軟體與瀏覽器對於反鋸齒的差異性
由於各平台、各瀏覽器對於字體渲染的方式皆有所不同，像是 WindowsXP 提供的 ClearType 工具、以及 OSX 系統中大家為之稱道的強大文字渲染，各家對於字體有不同的處理方式，但最終目的都是一樣的：提供使用者清晰又美觀的字體閱讀經驗。
這邊我們簡單針對目前網頁瀏覽中最常見的兩套中文黑體字型以及覆蓋率最高的兩套瀏覽器來做簡單的比較，這邊簡單列出測試細節僅供參考，如果想跳過比較的讀者可以拉到文章最下面觀看結論。
- OSX 10.8.3，Windows 7 SP1、Chrome 版本號 28、Firefox 版本號 22。
- OSX 10.8.3 系統下之黑體 - 繁（細），微軟正黑體（Regular）則直接安裝 Windows7 內附版本。
- Windows 7 系統下之微軟正黑體（Regular），黑體 - 繁（細）則為 OSX 10.8.3 內附版本利用 FontForge 轉換為 Windows 7 可以安裝之 OTF 格式。
- 跨平台安裝字體非通常用法，此部份僅為了比較並方便設計師對不同系統下的字體表現有個概念。
- 以下無特別更改系統及瀏覽器設定、並將 Chrome 瀏覽器的最小字級降低為 10 px 以方便做比較。要注意的是，由於軟體演算法會不斷改變、每台電腦設定值也不一致（尤其是 ClearType）因此這部份測試僅為參考用。
以這次比較的結果來看，Windows7 系統中的 Firefox 以及 Chrome 的文字顯示效果相當接近，微軟正黑體在 Windows 下顯示的效果相當優秀、除了字級 10 由於過小導致字體有些為變形以外，每個字級皆相當清晰易讀。而黑體 - 繁可能因為水土不服的關係，效果僅為差強人意的地步，由於經過暴力轉檔安裝，因此這部份僅為參考。以下為微軟正黑體 12、14、16 級字放大檢視其效果。
相較於 Windows 7 下兩個瀏覽器相當接近的效果，OSX 底下兩個瀏覽器的文字渲染效果差異則相當大，Chrome 的字體都較為厚實飽滿，這是由於 Chome 預設中文字體依然設定為儷黑 Pro 的緣故，但即使是 Firefox，其渲染效果亦比起 Windows7 要來得圓滑、厚實一些。以下為 OSX 下黑體 - 繁 12、14、16 級字放大檢視其效果（這張圖 Chrome 的部份已更改設定為黑體 - 繁）。
繪圖軟體的部份則相當單純，以下為同一組字體在 Photoshop 中不同反鋸齒設定的效果：
可以發現無論是微軟正黑體還是黑體 - 繁，兩套字體在使用銳利、強烈這兩個反鋸齒選項時，表現皆較為厚重、亦較為接近瀏覽器渲染出來的結果。
Illustrator 的部份則較為複雜，由於 Illustrator 本身為向量軟體的緣故，因此輸出點陣圖的時候亦有「最佳化線條圖」以及「最佳化文字」的選項，這兩選項會直接影響到使用「銳利」的結果：
由於「銳利化」會在輸出圖片的時候，選擇不同的反鋸齒演算法而有明顯的不同，因此建議在允許的狀況下，避免在 Illustrator 中使用此文字反鋸齒選項，而因為轉存點陣圖時的忽略導致輸出成品的明顯差異。
我不想看比較，告訴我結果吧！
但首先還是得先註明一下 Adobe 原廠對於 Photoshop 的文字反鋸齒以及網頁文字的說明：
「大型文字利於網頁檢視，而且可以在決定是否要套用消除鋸齒時，有更多的自由。
備註： 使用消除鋸齒時，字體較小和解析度較低 (例如網頁圖像所使用的解析度) 的文字在演算時可能會產生不一致。若要降低這種不一致性，請取消選取「字元」面板選單中的「比例寬度」選項。」
因此，完全一致是不存在的，但我們可以透過適當的選擇降低這個差異：在 Photoshop 中使用文字時，選用「銳利」可以得到最接近系統渲染的效果，「強烈」的效果也很好，但稍微模糊了一些，如下圖：
而在 Illustrator 中由於選用「銳利化」以及「強」的結果更為接近，但由於銳利化會因為輸出點陣化時的最佳化設定造成差異，因此建議在 Illustrator 中選擇「強」作為模擬瀏覽器渲染效果的設定。
作業系統以及軟體對於字體渲染的設定是大家一直想解決的問題，尤其是中文字型可以討論及掌控的資源又更少。中文字體（尤其是繁體字）不像拉丁語系一樣文字筆劃少、字體變化多，常常會有相當複雜的文字出現、系統的反鋸齒功能亦不一定對中文字體設計做過最佳化。
完美的解決方式目前似乎還不存在，例如 Chrome 的預設儷黑 Pro 字體的問題、兩個系統的黑體字差異問題等等。但我們在這透過幾個簡單的小測試、讓視覺設計師們在繪圖軟體中製作設計稿時，透過注意幾個小細節的設定，讓自己的設計稿與網頁製作出的成品更為接近、減少誤差。
參考文獻：
- Wiki- 黑體－繁
- Wiki- 微軟正黑體
- 圖片來源： Alan Light, CC Licensed
