當(dāng)前位置:首頁(yè) >  站長(zhǎng) >  網(wǎng)站運(yùn)營(yíng) >  正文

多彩字體指南:讓新手也能快速體驗(yàn)網(wǎng)頁(yè)繽紛多彩的樂(lè)趣

 2017-11-27 16:40  來(lái)源: A5企業(yè)專欄   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

Color Fonts(多彩字體)是最近網(wǎng)頁(yè)中新出現(xiàn)的設(shè)計(jì)詞匯,盡管它仍處于萌芽之中,不少網(wǎng)站設(shè)計(jì)師已經(jīng)在很多項(xiàng)目中使用這一技巧。這是因?yàn)槎嗖首煮w往往能夠給網(wǎng)站帶來(lái)不一樣的視覺(jué)效果,將信息以生動(dòng)、有趣的形式呈現(xiàn)給訪客,讓整個(gè)網(wǎng)站看上去更加豐富多彩?,F(xiàn)在,諸如Adobe Typekit 這樣的字體服務(wù)供應(yīng)商已經(jīng)開(kāi)始提供一些支持特定瀏覽器的多彩字體,多彩字體在網(wǎng)站中的使用越來(lái)越廣泛。一些網(wǎng)站開(kāi)發(fā)者預(yù)測(cè)多彩字體極有可能成為網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的下一個(gè)"大事件"。你了解多彩字體嗎?知道在網(wǎng)站中怎樣使用這一設(shè)計(jì)方式嗎?不用擔(dān)心,今天這篇文章就是帶大家系統(tǒng)的了解一下多彩字體,包括它的特征、適用情景等,快來(lái)一起看看吧!

什么是多彩字體?

多彩字體,顧名思義,是指字體的不同區(qū)域使用多彩的顏色來(lái)呈現(xiàn),包含陰影、漸變、紋理和透明度等屬性。千萬(wàn)不要將多彩文字簡(jiǎn)單的歸納為復(fù)雜多樣的顏色,字體中所蘊(yùn)含的豐富的細(xì)節(jié)處理也是非常重要的。

多彩字體包含了常見(jiàn)字體中的矢量形狀或位圖,甚至是兩者都有,這也使得多彩字體要比普通的字體更大。如果你對(duì)于多彩字體沒(méi)有什么概念,你可以想想我們用過(guò)的圖標(biāo)字體和表情字體,它們就是常見(jiàn)的多彩字體。而只使用一種顏色的字體常被成為"有色的字體",因?yàn)樗鼈儼环N色度或色調(diào)。

不過(guò),多彩字體目前面臨的最大的問(wèn)題就在于它還沒(méi)有形成一套真正標(biāo)準(zhǔn)的字體格式。而且,不同格式的多彩字體在使用時(shí)也存在差異,SVG矢量圖的多彩字體可以輕松實(shí)現(xiàn)縮放,而位圖格式在縮放時(shí)卻會(huì)出現(xiàn)尺寸限制的問(wèn)題。目前常見(jiàn)的多彩字體包含以下5種格式:

·SBIX(Apple):支持macOS 和 iOS系統(tǒng)上的原生位圖字體

·CBDT(Google):支持Android 系統(tǒng)上的原生位圖字體

·COLR(Microsoft):支持Windows 8.1+ 系統(tǒng)上的矢量字體

·SVG(W3C):有矢量和位圖字體兩種版本

·OpenType SVG(Adobe/Mozilla):將SVG文檔置于 OpenType 字體中而構(gòu)成的位圖和矢量圖版本

除了Apple、Google公司外,還有不少企業(yè)機(jī)構(gòu)也在使用多彩字體,它們正努力逐步完善自己旗下的字體標(biāo)準(zhǔn)和使用規(guī)范。Mozilla(Firefox背后的支持機(jī)構(gòu))和Adobe 已經(jīng)正式聲明將OpenType SVG作為它們多彩字體的首選格式。盡管這些公司已經(jīng)就多彩字體作出了決策,不少公司仍對(duì)這一趨勢(shì)持觀望態(tài)度。

怎樣使用多彩字體(適用情境)?

人們對(duì)于多彩字體常會(huì)有截然不同的第一印象。第一次看到多彩字體時(shí),一些人會(huì)覺(jué)得:"這是什么亂七八糟的",而另一些人則會(huì)認(rèn)為:"這種字體簡(jiǎn)直太炫酷了,我已經(jīng)想好要在哪個(gè)地方用它了"。不管你站在哪個(gè)陣營(yíng),你都不能忽略一個(gè)事實(shí),那就是:多彩字體在某些網(wǎng)站中可以完美適應(yīng),充分發(fā)揮自己的作用。當(dāng)然,你在使用多彩字體時(shí)也要足夠謹(jǐn)慎,不要做得太過(guò)了。下面是小飛列舉出來(lái)適合使用多彩字體的一些情境:

·用在一句話或短語(yǔ)上以充分吸引用戶注意力

·用在圖標(biāo)或者LOGO樣式元素上

·用在大量文本開(kāi)頭下沉的首字上

·用在極簡(jiǎn)主義設(shè)計(jì)中作為視覺(jué)主體的標(biāo)題上

·用在大段文本中某個(gè)或某幾個(gè)需要重點(diǎn)突出的單詞

·當(dāng)整個(gè)設(shè)計(jì)的其他部分都比較簡(jiǎn)單時(shí)

·當(dāng)排版是整個(gè)設(shè)計(jì)最主要的視覺(jué)元素時(shí)

·當(dāng)整個(gè)設(shè)計(jì)需要一些有趣或不同尋常的設(shè)計(jì)來(lái)吸引用戶注意力時(shí)

什么時(shí)候應(yīng)該避免使用多彩字體?

任何事物都是有利有弊的,多彩字體也是一樣。如果我們?cè)诰W(wǎng)站中使用過(guò)多的多彩字體,常會(huì)讓網(wǎng)站看上去眼花繚亂,對(duì)訪客產(chǎn)生干擾,影響信息的有效傳遞,還會(huì)讓整個(gè)設(shè)計(jì)看上去華麗空洞,影響網(wǎng)站形象。還有,多彩字體不是無(wú)條件適用于任何網(wǎng)站的。所以,謹(jǐn)慎運(yùn)用多彩字體,避免負(fù)面效應(yīng)。小飛特意整理了一些不適合使用多彩字體的情境,希望可以給大家一些借鑒和參考:

·當(dāng)字體的背景是圖片時(shí)

·當(dāng)背景的視覺(jué)設(shè)計(jì)較為復(fù)雜時(shí)

·只有大量的文本內(nèi)容時(shí)

·當(dāng)頁(yè)面中包含大量的動(dòng)畫(huà)和動(dòng)效,或其他元素運(yùn)用了大量色彩時(shí)

·頁(yè)面的其他地方已使用了新奇特殊的字體時(shí)

多彩字體的發(fā)展趨勢(shì)

實(shí)際上,盡管多彩字體正處于初步發(fā)展階段,它正不斷努力獲得一些關(guān)注排版設(shè)計(jì)開(kāi)發(fā)者的支持。這不,Adobe 和Mozilla 所推出的 OpenType SVG 格式讓多彩字體真正開(kāi)始進(jìn)入設(shè)計(jì)師的視野。Adobe 最近甚至已經(jīng)在Photoshop 更新了這一字體(你可能在字元面板上注意到了)。Adobe 對(duì)于 OpenType SVG 的闡述是這樣的:

"OpenType-SVG 是一種包含了全部或部分字母/字形的SVG 圖形,它使得單個(gè)文字可以顯示多種色彩甚至漸變。也正是因?yàn)樗倪@一特性,OpenType-SVG 是多彩字體的一種表現(xiàn)形式。另外,OpenType-SVG 字體仍擁有普通字體的一些特質(zhì),可以直接拿過(guò)來(lái)使用,可以被編輯,搜索或索引。除此,OpenType-SVG還具有OpenType字體的一些特征,比如允許字型替代或字型樣式替代。"

"諸如 Trajan Color Concept 和 EmojiOne Color 這樣的多彩字體在字體菜單上的呈現(xiàn)就和普通字體的一樣。但是多彩字體擁有可供編輯的色彩屬性,如果你的字體工具支持它們的話,就可以正常顯示且可編輯。但如果工具對(duì)于多彩屬性并不支持的話,也沒(méi)有關(guān)系。它仍可以作為普通字體使用,不過(guò)只能以純色的形式呈現(xiàn)。"

就目前多彩字體的演變過(guò)程和使用范圍來(lái)看,有兩個(gè)主要的影響因素,一是瀏覽器對(duì)于多彩字體的兼容性,The State of Web Type 中詳細(xì)闡明了多彩字體需要哪些瀏覽器的功能支持。二是設(shè)計(jì)與華麗多彩的文本在風(fēng)格上的匹配度。每一種設(shè)計(jì)趨勢(shì)都不可能適應(yīng)所有的建站需求,多彩字體可能更加適合華麗、豐富的網(wǎng)站。小飛相信,隨著網(wǎng)絡(luò)建站技術(shù)的不斷發(fā)展,未來(lái)瀏覽器對(duì)于多彩字體的兼容性會(huì)越來(lái)越強(qiáng),多彩字體的發(fā)展勁頭不可小覷。

動(dòng)手嘗試

如果你覺(jué)得多彩字體在你的網(wǎng)站中能夠發(fā)揮一定的作用,同時(shí)也與網(wǎng)站的整體風(fēng)格相適應(yīng),那就在網(wǎng)站中試一試吧!不過(guò)多彩字體從哪來(lái)呢?這有兩個(gè)渠道,一是下載。這種方法比較方便,下面是幾種現(xiàn)成的多彩字體,你可以研究一下:

·Type with Pride

·Beach Towel

·Bungee

·Watercolor Font

·Bixa Color

·Kids Toys

·OneLine Bold

·Guru

·Neon

還有一種方法就是自己制作多彩文字。這種方式比較自由,制作出來(lái)的多彩文字也極具個(gè)人色彩,在獨(dú)特性上無(wú)與倫比。不同的軟件做出來(lái)的多彩字體在效果上也會(huì)有一定的不同,你可以選擇自己比較習(xí)慣、喜歡的軟件來(lái)設(shè)計(jì)。下面是3款小飛推薦的多彩字體制作軟件:

·Fontself 是一款A(yù)I 和 PS 可用的插件,在創(chuàng)建多彩字體很是便捷

· Glyphs 上有手把手教您繪制多彩字體的教程

·FontLab 提供視頻教程,詳細(xì)介紹多彩字體設(shè)計(jì)的整個(gè)過(guò)程

多彩字體在海報(bào)和平面設(shè)計(jì)中的應(yīng)用由來(lái)已久,在吸引用戶注意力、留下深刻印象方面有著其他設(shè)計(jì)方式所不能及的優(yōu)勢(shì)。而現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)也開(kāi)始更多的擁抱多彩字體,相信在未來(lái)的發(fā)展潮流中它定能占據(jù)一席之地。字體還可以這么玩?是不是漲姿勢(shì)了?趕緊學(xué)起來(lái)吧,玩轉(zhuǎn)多彩字體!

快來(lái)起飛頁(yè)自助建站平臺(tái)()做一個(gè)響應(yīng)式網(wǎng)站吧!

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦