背景知識:
TTF字體:
TrueType Font ,由Apple和微軟公司合作推出的文字文件格式,一個TTF字符由大量多邊形組成,每一個多邊形由一個名叫TTPOLYGONHEADER的數據結構開始,跟在TTPOLYGONHEADER後面的是一系列的TTPOLYCURVE數據結構體。多邊形的頂點是POINTFX類型的數據結構點。
字體是如何保證對齊的呢?原來在字庫內部,有一個基准線,就好像信紙的虛線,用來水平方向對齊的,同樣,也有個垂直方向的基准線。每個字都有上浮和下沉的高度,這也是該字的最上和最下的點所處的位置。
矢量字在不同字號下,根據點陣尺寸,顯示的精細程度也不一樣。我們這裡將“8”放大了看,在小字號和大字號下的效果。
在不同的字號下,根據最簡單的縮放原理,將所有的點縮放到合適的位置,再確定曲線。這時候,一條邊就占據不了整列像素,或者一條邊壓在了兩列像素的中間,這樣就造成了灰色的線條。而這並不是我們想要的效果,Photoshop通過USM銳化濾鏡,將虛邊得以逐步清晰,以達到所要的矢量字。
蘋果系統通過調整整體點陣的位置,將所有的點適當偏移半個像素以內的位置,可以實現較為清晰的字體。如果在關閉了消除鋸齒方式,則有些邊線由於占據不了半個像素,而不能夠顯示,這就形成了所謂的缺邊或者缺筆劃。
有些軟件,比如AdobeAcrobat,通過一種較為復雜算法,以實現矢量字的清晰。將某些關聯的點作為一個segment,並且局部偏移到鄰近的整數位,而其他部分不動。這種方法目前較為流行,可以實現比蘋果和ps還要清晰的矢量效果。
為什麼我們通常看到的齒條文字這麼清晰呢
微軟的TTF為了保證小字號下的清晰,可謂是用盡了方法。首先,在龐大的字庫,內置了數個字號的點陣字,接著才是矢量字。比如宋體,內置了12、14、16、18等幾個點陣字庫,在這些之外才使用矢量字庫來渲染。這也是為什麼一個TTF文件要幾兆甚至幾十兆的容量,不過內嵌的點陣字越多,在不同字號下實現的效果自然越好。別小看了這些點陣字,每一個都是平面設計師在工具上畫的,並非由軟件生成。唉,可憐的設計師啊~~~~~~
(ps:Android自帶字庫最大就5M,是矢量字庫)。
不過,有個特例。比如Arial字體,內部全是矢量字,但各種尺寸下都是這麼清晰。為什麼呢?
原來,微軟在字庫中加入了解釋程序,interpreter,一種專門用於字庫渲染的腳本命令。在不同的字號下,都有相應的語句,將矢量字得以最清晰化。這是一種更復雜的技術,微軟也覺得不能廣泛使用,所以只有在部分的英文字庫中才有,而且該腳本對應每個字都有一段代碼,容量非常大,用在漢字上幾乎是不可能,除非是整個文字不多於100個才能使用。
interpreter就是這麼神奇,他也是目前最好的技術之一,能夠將矢量字渲染的和點陣字一樣的清晰。他將某些邊線的距離拉開,而將另一部分收縮,總之是按照人的想法來做的,這也是編好的程序。
矢量字體的終極技術
在1998年的時候,微軟聲稱發明了一種新的技術,能在LCD上將矢量字體的清晰度提高到300%。而後,出現了名為Microsoft Reader的軟件。Adobe也不甘示弱,隨即在Acrobat 4中對CoolType進行了支持,而Linux的FreeType庫也開始支持次像素平滑。從實際效果來看,Acrobat做的最好,最靈活,而微軟的缺少適當的調節工具,Linux的次像素平滑簡直就是垃圾,照虎畫貓。(ps:所以Ubuntu的中文會顯示的那麼別扭,android基於linux但Google進行了優化,文字顯示效果得到質的提升)。
ClearType使用彩色來描邊,顯示對比度越是強的文字,比如白底黑字或者黑底白字,都是最清晰的。其實,理論上ClearType能夠將顯示精度提到到300%,但實際上只能達到200%左右。
一般來說,液晶顯示器的點陣分布都非常均勻,每個點都是由紅綠藍3色排列而成。我們通常要顯示一個白色,需要將紅綠藍都點亮,而黑色是都不顯示。ClearType將點的概念再次擴展,把鄰近的兩個點3色混淆,借前一個點的顏色而忽略後一點的某種顏色。這樣,就可以把傳統的一個點的最小單位擴展到1/3個點的單位。
在使用ClearType技術後,原來的字體渲染將更加清晰,當然,只限於LCD顯示器,CRT會更加模糊。ClearType還有一個關鍵的技術,就是Linux的次像素平滑沒有學去的地方,一定要考慮到紅綠藍的顏色亮度平衡。一般來說,綠色的亮度最高,而藍色的最低,所以我們要在顯示綠色的時候加點紅色和藍色來調低亮度,而顯示藍色的時候要加入綠色和紅色來增加亮度。這種做法也可以使邊界的彩邊不是那麼明顯,看起來更像是黑色的字。不過,這種做法使得原本可以提高顯示精細程度到300%的技術,降低了許多,不過還是要高於200%。
以上資料得出結論:
1.字體顯示不是越大越清晰,當字體像素與設備物理像素是點對點(或者1比N,N為整數時最清晰)。
2.在一些圖形處理軟件中比如Photoshop,文字都會經過算法優化,視覺上會比手機上更清晰,耐看一點。這個差異性是客觀存在的。
3.手機和電腦屏幕的物理像素大小和發光排列原理都不盡相同,所以呈現的細節特點,色彩的表現力和沖擊力都不一樣,最終效果還是要以特定設備為准。
延伸篇:
為了提升文字顯示效果的視覺感染力。人們設計了各種字體,並加入無數的藝術效果。在android系統中TextView組件封裝了文字的顯示和操作。雖然不能像專業軟件那樣對文字進行所有操作,但只要我們合理的使用裡面的陰影效果api,也能大大提升文字在手機中顯示效果,以下我會用一個demo簡單說明不同的陰影帶來完全兩樣的顯示效果。權當是拋磚引玉了。
1.讓文字顯示更清晰
可以看到加了一個像素的投影後文字顯得很清晰,也更有質感。
2.增加文字的視覺立體感。
凹感:
凸感:
3.讓陰影看起來是倒影增加屏幕顯示的通透性。
win7桌面圖標和android4.0桌面圖標都加了Y軸2個像素的投影增加圖標的感染力和視覺舒適度,也一定程度上讓屏幕看起來更清晰透徹。
結論:1.合理使用陰影能大大提升文字顯示的效果
2.文字陰影軟件實現,圖標投影請UI設計時直接在資源文件上畫好。
其實android實現文字陰影很簡單,比如我們要實現以下文本效果:
a.我們可以在布局XML文件裡面對TextView組件直接用屬性標簽定義:
b.也可以在源代碼裡面調用TextView實例方法進行設置:
Attribute Name
Related Method
Description
android:shadowColor
setShadowLayer(float,float,float,int)
定義陰影的顏色.
android:shadowDx
setShadowLayer(float,float,float,int)
陰影在水平方向的位移.
android:shadowDy
setShadowLayer(float,float,float,int)
陰影在豎直方向的位移. .
android:shadowRadius
setShadowLayer(float,float,float,int)
陰影的半徑.
兩者使用都很簡單,可以根據實際情況選擇一種去實現,也可以兩種混合著用。一般視圖型組件的在xml裡面定義,功能型組件可在代碼中實現會比較方便。
Tips:定義文字陰影的4個參數都需要UI設計稿中提供。數值不合理會讓文字顯示的更模糊難看,過猶不及請務必注意。
或許這個你也可以看一下》》Android 圖片資源顯示效果研究《《。見 http://www.linuxidc.com/Linux/2012-07/64349.htm