如何處理網(wǎng)頁(yè)當(dāng)中的字體鋸齒邊緣?
?
印刷字體得益于高分辨率印刷帶來(lái)的優(yōu)勢(shì),可以傲人地展現(xiàn)出漂亮的曲線和細(xì)節(jié)。然而一旦到了屏幕上,這些字體的優(yōu)勢(shì)會(huì)被笨重的像素點(diǎn)所扼殺,從而出現(xiàn)鋸齒邊緣、字體變形和細(xì)節(jié)丟失的情況。在顯示器生產(chǎn)商能夠生產(chǎn)出二百或三百PPl分辨率的屏幕前,類似
金華微信平臺(tái)的設(shè)計(jì)工程師們將不得不依賴軟件技術(shù)的進(jìn)步來(lái)解決這些問(wèn)題。
?
首先讓我們來(lái)看抗鋸齒技術(shù)。要想消除鋸齒,它的效果僅次于高清顯示器。它的原理相當(dāng)簡(jiǎn)單:沿著字體的邊緣增加半透明的像素點(diǎn),從而達(dá)到平滑“階梯狀”鋸齒的效果。當(dāng)然,在這個(gè)過(guò)程中,很多因素和技術(shù)決定了最后的呈現(xiàn)效果,如字體微調(diào)、次像素渲染、軟件性能、操作系統(tǒng)和機(jī)器規(guī)格,這里僅是說(shuō)到了一些而已。現(xiàn)在,我們來(lái)看看作為設(shè)計(jì)師的你,可以用Photoshop、Flash和CSS來(lái)為改善抗鋸齒做些什么。另外,我們也會(huì)解釋硬件、瀏覽器和操作系統(tǒng)所帶來(lái)的限制。
?
?
?
?
?
?
?
其次,讓我們認(rèn)識(shí)下鋸齒和抗鋸齒,只需稍加注意就能發(fā)現(xiàn),抗鋸齒技術(shù)對(duì)于文字的清晰度發(fā)揮著重要的作用。除了極少數(shù)例外,經(jīng)過(guò)抗鋸齒處理的文字能顯著減輕用戶眼部負(fù)擔(dān),更不用說(shuō)渲染后的字形更接近于預(yù)期設(shè)計(jì)。因此,設(shè)計(jì)師如果想要得到好的表現(xiàn)效果,就必須有意識(shí)地去使用抗鋸齒技術(shù)。此外,還需要考慮到自設(shè)計(jì)到輸出的整個(gè)過(guò)程中諸多的因素。
?
大多數(shù)字體渲染引擎都是依靠微調(diào)來(lái)確定哪些字形區(qū)域應(yīng)該被平滑處理。字體微調(diào)或指令,使用數(shù)學(xué)指令表格使字形與像素網(wǎng)格對(duì)齊,并確定哪些像素應(yīng)該采用哪個(gè)灰度。盡管多數(shù)軟件提供了標(biāo)準(zhǔn)算法的自動(dòng)微調(diào),但是理想的做法還是由字體設(shè)計(jì)師手工調(diào)整,并嵌入到文件里去。
?
簡(jiǎn)單來(lái)說(shuō),這些指令通過(guò)修改結(jié)構(gòu)上一些重要的點(diǎn)的位置來(lái)起到效果的,例如這些點(diǎn)沿著曲線或者在字干上被找到,指令就將它們?cè)谙袼剡吔缇€上作對(duì)齊。次要的點(diǎn)則基于同主要的點(diǎn)的關(guān)系再重新定位。使用諸如FontFore這樣的開(kāi)源字體編輯工具,允許你查看并編輯一個(gè)字體的微調(diào)信息。懂得了產(chǎn)生一個(gè)清晰的字形需要投入那么多的工作,你一定對(duì)字體設(shè)計(jì)師和工程師增多了幾分感激之情。
?