不過(guò)多知道一種實(shí)現(xiàn)文字間距的方法總是好的,雖然目前來(lái)看應(yīng)用場(chǎng)景很少,但是也許某天就派上用場(chǎng)了。比如12號(hào)的雅黑文本看上去會(huì)感覺(jué)密密麻麻的,但是加上一點(diǎn)文字間距,閱讀效果就會(huì)好很多。
關(guān)于字體,網(wǎng)頁(yè)里中文文本字體一般都是宋體,不建議使用其他字體,但是其實(shí)字體是可以上傳到服務(wù)器,然后頁(yè)面中引用該字體,就解決了用戶電腦上沒(méi)有相應(yīng)字體的問(wèn)題。不過(guò)很少有人會(huì)這么做,為什么呢?1.瀏覽器是可以設(shè)置忽略網(wǎng)頁(yè)字體,改用用戶設(shè)置的字體(IE:工具->Internet選項(xiàng)->輔助功能)。2.服務(wù)器上的字體是需要加載的,而一個(gè)字體一般都幾兆,嚴(yán)重影響頁(yè)面載入速度。所以對(duì)于特殊字體,通常都是做成圖片。
關(guān)于背景,產(chǎn)品類的按鈕我們一般都是像A這樣設(shè)計(jì)(中間段是橫向的重復(fù)圖案),而不是像B這樣,因?yàn)楫a(chǎn)品類的按鈕一般都是復(fù)用的,可以用兩段拼出來(lái)一個(gè)按鈕,而B這個(gè)寬度就限死了。
關(guān)于文字效果
文字自身屬性相關(guān)的效果css中都是有相對(duì)應(yīng)的樣式的,如字號(hào)、行高、加粗、傾斜、下劃線等,但是一些特殊的效果,主要表現(xiàn)為ps中圖層樣式中的效果,css是無(wú)能為力的。但是css也在不斷發(fā)展,在css3中已經(jīng)新增了文字陰影的效果,可惜IE6、7、8均不支持。所以,一些比較特殊的文字效果,依然只能通過(guò)圖片來(lái)實(shí)現(xiàn)。
在css中其實(shí)是可以控制文字間距的,但是現(xiàn)實(shí)中很少會(huì)使用,一方面是很多設(shè)計(jì)師不知道css中有相應(yīng)的屬性,并且需要使用文字間距的場(chǎng)景也不多,另一方面,瀏覽器解析文字間距的方式也令這一屬性在某些場(chǎng)景下無(wú)法使用,比如在文字居中的時(shí)候,實(shí)際居中的區(qū)域是包含了文字間距的(如上圖),使得在視覺(jué)效果上讓人無(wú)法接受,所在當(dāng)需要在文字中保留一定空間的時(shí)候(比如兩個(gè)字的按鈕),會(huì)直接用空格來(lái)代替。
關(guān)于漸變、圓角、投影在css3中終于實(shí)現(xiàn)了漸變、圓角和投影,不過(guò)可惜的是IE6、7、8均不支持,設(shè)計(jì)師也需要了解的一些前端知識(shí),但是已經(jīng)可以在越來(lái)越多的網(wǎng)站中看到新css的應(yīng)用,尤其是按鈕,淡淡的漸變,hover上去有點(diǎn)淡淡的陰影,效果很好,對(duì)于不支持的瀏覽器,設(shè)置一個(gè)顏色近似的背景,看到的是單色、直角效果。
【 微信掃一掃 】