超級新手理解的字型渲染

2021-06-28 18:26:46 字數 1834 閱讀 8737

所謂字型渲染,就是把指定的字形用畫素表示出來,由於大部分顯示裝置的畫素都是方形或長方形的小格仔,所以也叫柵格化。字形是一種特殊的圖形,專門用來表示字元,所以字型渲染也是圖形渲染的重要組成部分,屬於計算機圖形學範疇。

渲染方式本身與字型原型設計有直接關係,所以先說說字型的設計方式。大體上字型設計可以分成位圖字型(點陣字型)和向量字型。位圖字型,就是用01雙色位圖表示特定位置的畫素是否有顏色,本身就是乙個2色位圖。而向量字型則使用數學公式表示字型的形狀,渲染的時候需要根據縮放比例重新計算特定位置畫素的顏色值。位圖字型的優點是渲染簡單快速,缺點是放大縮小都會引起失真;向量字型的優缺點與點陣圖字型恰恰相反。對於windows系統自帶的字型來說,fixed system font就是位圖字型,而絕大部分的其他字型,如宋體、楷體則一般都是向量字型。

這是渲染點陣字型的唯一方式,字形對應的每個畫素非黑即白。當然這裡的黑白指的並不是黑色白色兩種顏色,而是說有沒有顏色。下面是乙個黑白渲染的放大圖,清楚顯示了每個畫素的著色情況。

對於向量字型而言,字形中的每個部分並不是同樣重要的,比如字形的邊緣部分通常比較淡一些,這也是符合實際生活中的字型特徵的。渲染時,首先精確計算出特定畫素被字形覆蓋的比例,如果某個畫素被完全覆蓋,則100%賦予顏色值,如果畫素被部分覆蓋,其顏色值則會根據覆蓋比例給出。如下圖:

現在大部分的顯示裝置都是彩色的了,也就是說每個畫素可以發出黑白灰之外的彩色。特別是對於lcd顯示裝置來說,每個畫素對應於三個顏色分量部分,每個部分都可以單獨控制。這樣渲染向量字型時,就根據畫素被覆蓋比例以及其所處位置,被賦予特定的顏色值。也就是調整字形邊緣部分畫素的顏色分量。這樣控制的級別就比畫素更小了,從而被叫成了「次畫素」渲染。一般而言,左側邊緣和右側邊緣被賦予不同的顏色,從而產生立體感。如下圖:

上面字型的顏色其實是黑色的,不過由於次畫素渲染,導致邊緣部分出現了彩色。

凡事要自己動手才能真正有所體會。其實檢視字型的渲染方式非常簡單,只要截圖後放大顯示,就可以清晰識別出採用了什麼渲染技術。前面給出的例子我是這麼做出來的:

(1)對於黑白渲染。執行windows自帶畫圖軟體,輸入字元,然後設定字型為fixed system font。這個字型是點陣字型,所以就採用了黑白渲染。

(2)對於灰度渲染。由於這是windows xp的預設渲染方式,所以需要在windows xp上執行自帶畫圖軟體,然後輸入字元,設定字型為宋體。

(3)對於次畫素渲染。這是windows vista及以後系統預設渲染方式,所以需要在windows vista或以後版本的系統中執行自帶畫圖軟體,輸入字元,並設定字型為宋體。

輸入字元之後,放大顯示就可以清楚看出渲染的結果了。

各個軟體字型渲染的實際情況並不相同,即便同樣的字型和同樣的「次畫素」渲染方式,windows 8和mac os x以及android, ios實際的渲染效果並不完全相同。實際使用中,我們能明顯感覺到在普通液晶顯示器上,windows系統的字型顯示時邊緣清晰,而mac os x則有些邊緣模糊。這是兩種不同的策略,windows渲染字型時,適當四捨五入了部分邊緣畫素,從而導致邊緣更清晰;而mac os x則忠誠的渲染了字型當初設計的邊緣效果,然而在非視網膜屏上表現反而有些模糊了。然而一旦採用了視網膜屏,mac os x就會表現出所有細節,從而看起來更加圓潤。

針對不同的顯示裝置,需要不同的渲染方式。如針對解析度不高的led屏,黑白渲染更加合適;對於高解析度的印表機,抗鋸齒則完全沒有必要。

字型 字元 的渲染方法

最近開始在啃game programming gem 8.裡面有一些不錯的文章,及時咀嚼及時反思 記錄於此。一直以為字型渲染是件簡單的事 因為電腦上這麼多字型顯示麼,但是今天看了這文章才知道3d技術裡的字型渲染是兩回事。平時win裡面看到的文字這些基本都是通過gdi在cpu上運算繪製 或者也加入了顯...

學習之瀏覽器的渲染機制 新手小白的簡單理解

當你在瀏覽器中輸入url之後,如果請求成功,會得到伺服器提供的資源 html,css,js,等 瀏覽器會執行下面的操作 解析html時,是從上至下的 如果遇到script,dom樹和cssom樹的構建都會暫停,被阻塞,直到指令碼載入完畢或者是執行完畢 display none的元素也會在dom樹中 ...

render渲染的理解彙總

我們碼農把 一維的指令或資料 xml html ui結構 轉為二維或三維等方便人可見的東西的這一過程 也常被稱之為 render 其實 渲染 繪製 畫畫 這三個詞是乙個意思.對應的英文是render,draw,paint.但 渲染 的逼格要高於 繪製 繪製 的逼格要高於 畫畫 我是比較傾向把渲染這個...