網(wǎng)頁設(shè)計(jì)中的彩色字體-網(wǎng)站設(shè)計(jì)

網(wǎng)站設(shè)計(jì) 怎么優(yōu)化自己的網(wǎng)站" />

什么是彩色字體？這是一個(gè)不斷彈出并開始獲得認(rèn)可的術(shù)語，盡管在大型設(shè)計(jì)項(xiàng)目中的使用的很少。

像Adobe Typekit這樣的供應(yīng)商已經(jīng)開始發(fā)布一些支持瀏覽器的彩色字體，當(dāng)然也有一些更廣泛的用途。有些人甚至稱彩色字體為“網(wǎng)頁設(shè)計(jì)中的下一件大事”。

接下來，我們來看看這一趨勢(shì)，你來決定它是否是一件大事。

什么是彩色字體？

1、彩色字體幾乎就像它聽上去那樣，包含多種顏色，陰影或漸變，紋理或透明度的字體。它不僅僅是給字體添加了顏色，是包含很多細(xì)節(jié)的特定字體。

彩色字體可以是字體文件中的矢量形狀、位圖圖像或是兩者結(jié)合，這就使得彩色字體比標(biāo)準(zhǔn)字體包更大。常見示例包括表情符號(hào)或含有圖標(biāo)的字體。

彩色字體的大問題是現(xiàn)在沒有真正的標(biāo)準(zhǔn)格式。有一個(gè)缺陷就是所有的字體文件格式中矢量和SVG圖像可以縮放自如，但位圖可能會(huì)有大小限制。

實(shí)際上有五種格式要處理：

SBIX（Apple）：在Mac和iOS系統(tǒng)上的原生位圖版本

CBDT（Google）：在Android系統(tǒng)上的原生位圖版本

COLR（Microsoft）：在Windows 8.1+系統(tǒng)上的原生矢量圖版本

SVG（W3C）：矢量和位圖版本

OpenType SVG（Adobe/Mozilla）：將SVG形狀放在OpenType字體中的矢量和位圖版本

Mozilla（火狐瀏覽器的骨干）和Adobe已經(jīng)同意OpenType SVG是選格式;其他人還在不斷的改變著決定。

如果你想了解這些字體的工作原理以及所有文件格式的明確說明，可以查看Fontself（https://learn.fontself.com/color-fonts-what-when-where-dd8c82e5a561），它有一個(gè)很好的入門說明。

如何使用顏色字體？

2、當(dāng)你次看到彩色字體時(shí)，可能會(huì)產(chǎn)生的想法：

哇，太可惡了！

cool！我知道如何使用它！

無論你感受如何，一定有非常適合彩色字體的應(yīng)用程序，但你需要理性地使用它們。（少量使用彩色字體。）

可以使用彩色字體：

用一個(gè)短詞語引人注意的技巧

用于圖標(biāo)或logo的元素

用于一段長(zhǎng)文本的段大字

用于小型設(shè)計(jì)中醒目的標(biāo)題

將焦點(diǎn)聚集在一個(gè)特定的詞語上或是一大段文字中的某個(gè)詞語

當(dāng)其余的設(shè)計(jì)比較簡(jiǎn)單

作為排版中你主要的設(shè)計(jì)元素

當(dāng)項(xiàng)目需要一些有趣和不尋常的東西來吸引用戶的注意

不使用彩色字體

3、更多時(shí)候我們不使用顏色字體。你一定不想把網(wǎng)站設(shè)計(jì)成20世紀(jì)90年代那種閃爍的色彩瘋狂的風(fēng)格。

不要使用彩色字體：

有圖片或在圖片上方

復(fù)雜的背景

很多文字

有很多其他的設(shè)計(jì)技巧，如動(dòng)畫;單色通常足以產(chǎn)生視覺沖擊

有其他新奇或特殊的字體

不斷發(fā)展的趨勢(shì)

4、彩色字體開始流行是因?yàn)樗谂虐嬷衅鸬搅酥匾淖饔枚@得認(rèn)可。Adobe和Mozilla采用的OpenType SVG格式可能是幫助這一趨勢(shì)真正流行的工具，Adobe近甚至向photoshop中添加了彩色字體（你可能已經(jīng)注意到字符調(diào)色板中有一些emojis）。

這里是關(guān)于Adobe如何解釋的OpenType SVG：（https://helpx.adobe.com/typekit/using/ot-svg-color-fonts.html）

“OpenType-SVG是一種字體格式，OpenType字體具有作為SVG（可縮放矢量圖形）圖形的全部或部分的代表符號(hào)，這允許在單個(gè)字形中顯示多種顏色或漸變。由于這些特性，我們經(jīng)常將OpenType-SVG字體稱為“彩色字體”。

“OpenType-SVG字體允許以這些圖形的性質(zhì)顯示文本，同時(shí)允許被編輯、索引或搜索。它們包含OpenType的功能，允許字形替換或替代字形樣式。

“彩色字體的出現(xiàn)和Trajan Color Concept和Emoji One Color一樣，就像你程序字體菜單中的特有字體。但是，由于許多程序尚未完全支持顏色組件，因此無法顯示其全部可能性。如果你的軟件程序不支持字體中的SVG圖形，則字形將恢復(fù)為純黑色樣式。顏色仍然可以應(yīng)用于這種后備樣式，因?yàn)樗缤湫偷腛penType字體一樣?！?/p>

此外，The State of Web Type（http://stateofwebtype.com/#Color%20fonts）有一個(gè)部分專門用于更新瀏覽器來支持彩色字體，因此你可以確定何時(shí)適合使用。

在彩色字體的演變和使用方面，兩件事將發(fā)揮主要作用：

Web設(shè)計(jì)項(xiàng)目的選擇以及瀏覽器的兼容性（由于兼容性問題，實(shí)際上彩色字體設(shè)計(jì)更多的出現(xiàn)在打印中）。

現(xiàn)有的風(fēng)格技術(shù)是否可以與華麗多彩的設(shè)計(jì)技術(shù)統(tǒng)一。

嘗試顏色字體

5、如果彩色字體是你想要的設(shè)計(jì)，你可以下載來使用或自己創(chuàng)建，具體取決于設(shè)計(jì)項(xiàng)目的類型。

自己創(chuàng)建

你的軟件技能將決定你創(chuàng)建彩色字體的類型。你可以自己完成或使用工具來幫助設(shè)計(jì)你想要的彩色字體。

Fontself（https://www.fontself.com/）是ai和ps可以添加的插件，它能幫助你創(chuàng)建彩色字體

你可以學(xué)習(xí)Glyphs（https://glyphsapp.com/tutorials/creating-a-layered-color-font）的教程，從頭開始繪制設(shè)計(jì)

FontLab（https://www.youtube.com/watch?v=Yit1ZpClwAk）有視頻教程，逐步的講解整個(gè)過程。

下載或嵌入

這里有一些可以幫助你創(chuàng)建彩色字體：

用傲慢的類型（https://www.typewithpride.com/）

沙灘巾（https://creativemarket.com/anugrahadesign/1512983-Beach-Towel-Color-Font）

蹦極（https://djr.com/bungee/）

水彩字體（https://creativemarket.com/undrey/1240261-Watercolor-font）

Bixa顏色（https://bixacolor.com/）

兒童玩具（https://creativemarket.com/popskraft/1409713-Colorful-typefaces-child-typography）

一線大膽（https://creativemarket.com/kaer_cm/1219084-OneLine-Bold-color-font）

領(lǐng)袖（http://www.novotypo.nl/fonts/guru.html）

氖（https://creativemarket.com/inkdrop/1274409-Neon-OTF-colour-font）

本文名稱：網(wǎng)頁設(shè)計(jì)中的彩色字體-網(wǎng)站設(shè)計(jì)
文章分享：http://www.muchs.cn/news9/179259.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)