描邊字型範例

所謂描邊字型 (outline font)、又稱為向量字型 (這是個不好的名字，稍後解釋)， 或者一般而言的描邊圖或者向量圖， 都是將描繪的對象以數學方程式寫出來，在電腦中只紀錄方程式， 所以資料量很小；而方程式又可以隨意代入其他尺度的變數， 因此可以任意縮小或放大。

例如要描繪一個圓，如果用點陣圖可能要許多像素才能表現圓， 而且點陣圖有一定的大小，如果不顧一切硬要縮小或放大點陣圖， 只能捨棄或者增加像素，這樣的結果通常並不好看，要不然看起來不夠「圓」， 要不然在圓周上會看到不平滑的鋸齒 (後面有一個例子)。 如果只儲存方程式，那麼就只需要三個參數 a,b,r 即可： 調整這三個參數，方程式 (x-a)² + (y-b)² = r² 就可以表達一個圓。

但是，輸出裝置是以光點或色點來製造圖像， 因此必須告訴它們像素才能顯像。 換句話說，輸出裝置只能呈現點陣圖。 因此描邊圖只是一個具備兩大好處的圖像儲存方式而已：

1. 節省磁碟和記憶體空間
2. 可以在很大的範圍內任意縮放，因此也就可以適應各種解析度的輸出裝置

現在我們用一個『永』字作為描邊字型的例子， 讀者應當可以理解，一般的描邊圖也是類似的道理。 這個字以 200x200 點陣圖的形式呈現出來，就是像左邊這樣的圖片。 這張圖片是以 GIF 檔案儲存的。 但是這個『永』字原來並非點陣字型， 它是以描邊方程式的形式儲存在特殊的字型檔案內 (這個檔案包含所有 Big-5 字集裡面的 13,461 個字符)。

舉例來說，如果您使用微軟的 Windows XP 或類似作業系統， 則她採用所謂的 TrueType Font (TTF)， 以我的 XP 系統為例，在 [控制台\字型] 資料夾裡面， 有標楷體的 TrueType 字型檔案。這個檔案包含一萬三千多個字符的描邊字型， 卻只有大約 5MB 的資料量。 而光是左上方的 200x200 『永』字，在壓縮後就有 4KB 以上的資料量； 所以在這種像素數之下，即使經過壓縮， 還是需要 53MB 左右才能儲存所有 Big-5 字集內的字符。 而整個 TrueType Font 只有 10MB 左右，並且它除了可以呈現 200x200 的點陣字， 還可以呈現 20x20 的點陣字，像這樣： 事實上，Windows XP 可以利用同一個 TrueType Font 呈現任意大小的點陣字 (只要在方程式上面代換新的變數，再重新製造像素矩陣即可，看下面的敘述)。 這就是前面所述「兩大好處」的意思。

現在我們拿『永』的中間那一筆作例子。 所謂描邊字型就是檔案內只紀錄著這一筆劃的外框曲線。 而那一條封閉 (繞了「一圈」的意思) 的外框曲線， 並非一個方程式構成---那樣太困難了， 而且會造成不必要的麻煩---而是由許多條較為簡單的曲線組成。 那些比較簡單的曲線各自是一個二次或三次參數多項式 (各家設計稍有不同)。 在數學上，這種使用一段一段的簡單方程式 (例如三次多項式) 銜接而成的函數，通稱為樣條函數 (spline function)， 而根據函數畫出來的曲線，就是樣條曲線。 一段曲線與另一段曲線的銜接點，稱為結點 (note)，如圖中的黑點所示。 在描邊字型的檔案內，任意設定橫向 (x 軸) 與縱向 (y 軸) 的單位長， 根據這個直角座標系統，可以寫出那些結點的向量座標。 這就是「向量字型」或「向量圖」這個名詞得來源。 同樣也是在那個虛設的直角座標系統上，我們可以寫出每一條曲線的方程式。 爾後要放大或縮小，只要調整座標系統的單位長就好了。 在數學上，這就相當於一次變數變換。

事實上，前述的變數變換也只是一個觀念。 實際情況是，描邊圖呈現在輸出裝置上的大小，完全由它的像素個數決定。 如果像素少，看起來比較小；如果像素多，看起來比較大 (以一個像素對應一個光點或色點為原則)。 將描邊圖轉換為點陣圖的過程稱為篩網。 如果在座標系統上以較大的網格來篩網，就會得到比較少像素 (20x30 像素矩陣)，如以下三張圖所示。

而如果在座標系統上以較小的網格來篩網，就會得到比較多像素 (50x75 像素矩陣)，如以下三張圖所示。

上面兩種篩網的結果看似粗糙，那是因為我們將它們放大給各位觀看。 如果每個方格點對應一個光點或色點的話， 像素較少的看起來較小，所以也不至於看到它粗糙的細節。 如果用 200x300 個網格來篩網，得到 200x300 點陣圖，就會精緻得像下面這張圖。

如果不按照程序，先以數學模型放大描邊圖，再將它篩網成為點陣圖， 而是硬性地放大點陣圖，就會看到鋸齒。 例如以下我將 200x200 的『永』字點陣圖硬性放大 9 倍 (水平與垂直各 3 倍)，形成一個 600x600 的像素矩陣， 那麼一般的秀圖軟體或點陣字型處理軟體， 都只會把一個像素對應 9 個光點或色點，鋸齒就是這樣產生的。

順便一提。有些軟體會設法填補鋸齒的尖角，使得鋸齒看起來沒那麼嚴重。 這種演算法，術語稱作 anti-alias。 如果您在上面的圖中，看到字的邊緣有朦朧的灰色， 就是 anti-alias 起了作用。 Anti-alias 的效果有多好或者有多壞，那要看您使用的瀏覽器如何處理圖像， 不是我在此時此刻可以預知的。 到目前為止，所有 anti-alias 的演算法都不夠可靠， 它們只能在很小的範圍內矇混得過去。