Color Fonts(多彩字體)是最近網(wǎng)頁中新出現(xiàn)的設(shè)計(jì)詞匯,盡管它仍處于萌芽之中,不少網(wǎng)站設(shè)計(jì)師已經(jīng)在很多項(xiàng)目中使用這一技巧。這是因?yàn)槎嗖首煮w往往能夠給網(wǎng)站帶來不一樣的視覺效果,將信息以生動、有趣的形式呈現(xiàn)給訪客,讓整個(gè)網(wǎng)站看上去更加豐富多彩。現(xiàn)在,諸如Adobe Typekit 這樣的字體服務(wù)供應(yīng)商已經(jīng)開始提供一些支持特定瀏覽器的多彩字體,多彩字體在網(wǎng)站中的使用越來越廣泛。一些網(wǎng)站開發(fā)者預(yù)測多彩字體極有可能成為網(wǎng)頁設(shè)計(jì)領(lǐng)域的下一個(gè)"大事件"。你了解多彩字體嗎?知道在網(wǎng)站中怎樣使用這一設(shè)計(jì)方式嗎?不用擔(dān)心,今天這篇文章就是帶大家系統(tǒng)的了解一下多彩字體,包括它的特征、適用情景等,快來一起看看吧!
什么是多彩字體?
多彩字體,顧名思義,是指字體的不同區(qū)域使用多彩的顏色來呈現(xiàn),包含陰影、漸變、紋理和透明度等屬性。千萬不要將多彩文字簡單的歸納為復(fù)雜多樣的顏色,字體中所蘊(yùn)含的豐富的細(xì)節(jié)處理也是非常重要的。
多彩字體包含了常見字體中的矢量形狀或位圖,甚至是兩者都有,這也使得多彩字體要比普通的字體更大。如果你對于多彩字體沒有什么概念,你可以想想我們用過的圖標(biāo)字體和表情字體,它們就是常見的多彩字體。而只使用一種顏色的字體常被成為"有色的字體",因?yàn)樗鼈儼环N色度或色調(diào)。
不過,多彩字體目前面臨的最大的問題就在于它還沒有形成一套真正標(biāo)準(zhǔn)的字體格式。而且,不同格式的多彩字體在使用時(shí)也存在差異,SVG矢量圖的多彩字體可以輕松實(shí)現(xiàn)縮放,而位圖格式在縮放時(shí)卻會出現(xià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)就多彩字體作出了決策,不少公司仍對這一趨勢持觀望態(tài)度。
怎樣使用多彩字體(適用情境)?
人們對于多彩字體常會有截然不同的第一印象。第一次看到多彩字體時(shí),一些人會覺得:"這是什么亂七八糟的",而另一些人則會認(rèn)為:"這種字體簡直太炫酷了,我已經(jīng)想好要在哪個(gè)地方用它了"。不管你站在哪個(gè)陣營,你都不能忽略一個(gè)事實(shí),那就是:多彩字體在某些網(wǎng)站中可以完美適應(yīng),充分發(fā)揮自己的作用。當(dāng)然,你在使用多彩字體時(shí)也要足夠謹(jǐn)慎,不要做得太過了。下面是小飛列舉出來適合使用多彩字體的一些情境:
·用在一句話或短語上以充分吸引用戶注意力
·用在圖標(biāo)或者LOGO樣式元素上
·用在大量文本開頭下沉的首字上
·用在極簡主義設(shè)計(jì)中作為視覺主體的標(biāo)題上
·用在大段文本中某個(gè)或某幾個(gè)需要重點(diǎn)突出的單詞
·當(dāng)整個(gè)設(shè)計(jì)的其他部分都比較簡單時(shí)
·當(dāng)排版是整個(gè)設(shè)計(jì)最主要的視覺元素時(shí)
·當(dāng)整個(gè)設(shè)計(jì)需要一些有趣或不同尋常的設(shè)計(jì)來吸引用戶注意力時(shí)
什么時(shí)候應(yīng)該避免使用多彩字體?
任何事物都是有利有弊的,多彩字體也是一樣。如果我們在網(wǎng)站中使用過多的多彩字體,常會讓網(wǎng)站看上去眼花繚亂,對訪客產(chǎn)生干擾,影響信息的有效傳遞,還會讓整個(gè)設(shè)計(jì)看上去華麗空洞,影響網(wǎng)站形象。還有,多彩字體不是無條件適用于任何網(wǎng)站的。所以,謹(jǐn)慎運(yùn)用多彩字體,避免負(fù)面效應(yīng)。小飛特意整理了一些不適合使用多彩字體的情境,希望可以給大家一些借鑒和參考:
·當(dāng)字體的背景是圖片時(shí)
·當(dāng)背景的視覺設(shè)計(jì)較為復(fù)雜時(shí)
·只有大量的文本內(nèi)容時(shí)
·當(dāng)頁面中包含大量的動畫和動效,或其他元素運(yùn)用了大量色彩時(shí)
·頁面的其他地方已使用了新奇特殊的字體時(shí)
多彩字體的發(fā)展趨勢
實(shí)際上,盡管多彩字體正處于初步發(fā)展階段,它正不斷努力獲得一些關(guān)注排版設(shè)計(jì)開發(fā)者的支持。這不,Adobe 和Mozilla 所推出的 OpenType SVG 格式讓多彩字體真正開始進(jìn)入設(shè)計(jì)師的視野。Adobe 最近甚至已經(jīng)在Photoshop 更新了這一字體(你可能在字元面板上注意到了)。Adobe 對于 OpenType SVG 的闡述是這樣的:
"OpenType-SVG 是一種包含了全部或部分字母/字形的SVG 圖形,它使得單個(gè)文字可以顯示多種色彩甚至漸變。也正是因?yàn)樗倪@一特性,OpenType-SVG 是多彩字體的一種表現(xiàn)形式。另外,OpenType-SVG 字體仍擁有普通字體的一些特質(zhì),可以直接拿過來使用,可以被編輯,搜索或索引。除此,OpenType-SVG還具有OpenType字體的一些特征,比如允許字型替代或字型樣式替代。"
"諸如 Trajan Color Concept 和 EmojiOne Color 這樣的多彩字體在字體菜單上的呈現(xiàn)就和普通字體的一樣。但是多彩字體擁有可供編輯的色彩屬性,如果你的字體工具支持它們的話,就可以正常顯示且可編輯。但如果工具對于多彩屬性并不支持的話,也沒有關(guān)系。它仍可以作為普通字體使用,不過只能以純色的形式呈現(xiàn)。"
就目前多彩字體的演變過程和使用范圍來看,有兩個(gè)主要的影響因素,一是瀏覽器對于多彩字體的兼容性,The State of Web Type 中詳細(xì)闡明了多彩字體需要哪些瀏覽器的功能支持。二是設(shè)計(jì)與華麗多彩的文本在風(fēng)格上的匹配度。每一種設(shè)計(jì)趨勢都不可能適應(yīng)所有的建站需求,多彩字體可能更加適合華麗、豐富的網(wǎng)站。小飛相信,隨著網(wǎng)絡(luò)建站技術(shù)的不斷發(fā)展,未來瀏覽器對于多彩字體的兼容性會越來越強(qiáng),多彩字體的發(fā)展勁頭不可小覷。
動手嘗試
如果你覺得多彩字體在你的網(wǎng)站中能夠發(fā)揮一定的作用,同時(shí)也與網(wǎng)站的整體風(fēng)格相適應(yīng),那就在網(wǎng)站中試一試吧!不過多彩字體從哪來呢?這有兩個(gè)渠道,一是下載。這種方法比較方便,下面是幾種現(xiàn)成的多彩字體,你可以研究一下:
·Type with Pride
·Beach Towel
·Bungee
·Watercolor Font
·Bixa Color
·Kids Toys
·OneLine Bold
·Guru
·Neon
還有一種方法就是自己制作多彩文字。這種方式比較自由,制作出來的多彩文字也極具個(gè)人色彩,在獨(dú)特性上無與倫比。不同的軟件做出來的多彩字體在效果上也會有一定的不同,你可以選擇自己比較習(xí)慣、喜歡的軟件來設(shè)計(jì)。下面是3款小飛推薦的多彩字體制作軟件:
·Fontself 是一款A(yù)I 和 PS 可用的插件,在創(chuàng)建多彩字體很是便捷
· Glyphs 上有手把手教您繪制多彩字體的教程
·FontLab 提供視頻教程,詳細(xì)介紹多彩字體設(shè)計(jì)的整個(gè)過程
多彩字體在海報(bào)和平面設(shè)計(jì)中的應(yīng)用由來已久,在吸引用戶注意力、留下深刻印象方面有著其他設(shè)計(jì)方式所不能及的優(yōu)勢。而現(xiàn)在網(wǎng)頁設(shè)計(jì)也開始更多的擁抱多彩字體,相信在未來的發(fā)展潮流中它定能占據(jù)一席之地。字體還可以這么玩?是不是漲姿勢了?趕緊學(xué)起來吧,玩轉(zhuǎn)多彩字體!
快來起飛頁自助建站平臺()做一個(gè)響應(yīng)式網(wǎng)站吧!
申請創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!