這篇文章將為大家詳細(xì)講解有關(guān)使用CSS怎么實(shí)現(xiàn)一個(gè)彩色字體，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比汝南網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式汝南網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋汝南地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴(lài)。

初識(shí)彩色字體

在我們所熟知的傳統(tǒng)字體中，字體文件本身僅僅描述了字體的外形特征，這些特征一般包含著矢量的輪廓數(shù)據(jù)或是單色調(diào)位圖數(shù)據(jù)。在瀏覽器渲染單色字體時(shí)，渲染引擎使用設(shè)定的字體顏色填充字形區(qū)域，最后繪制出對(duì)應(yīng)文字及其設(shè)定的顏色。而彩色字體中，不僅僅存儲(chǔ)了字體的外形特征，還保存了顏色信息，甚至還能在字體中提供不同的配色，增加了靈活性的同時(shí)也更具豐富的外形細(xì)節(jié)。

日常使用中最常見(jiàn)的彩色字體要數(shù) Emoji 表情了。例如在 Windows 10 上，Segoe UI Emoji 就屬于一款彩色字體。

通常彩色字體還會(huì)包含一些兼容信息，這些兼容信息包含 Unicode 編碼的單色字形數(shù)據(jù)，使得在一些不支持彩色字體的平臺(tái)上，仍然能夠像渲染普通字體一樣將彩色字體的字形渲染出來(lái)，達(dá)到一種向后兼容的效果。

彩色字體的實(shí)現(xiàn)標(biāo)準(zhǔn)

在彩色字體設(shè)計(jì)的發(fā)展歷史上，由于各家有自己的實(shí)現(xiàn)方案，導(dǎo)致在 OpenType 字體中嵌入的色彩信息標(biāo)準(zhǔn)也不盡相同。在新的OpenType 標(biāo)準(zhǔn)中  ，就有多達(dá)四種彩色字體數(shù)據(jù)的描述格式。

1. SVG，由 Adobe 和 Mozilla 主導(dǎo)的矢量字體標(biāo)準(zhǔn)。其中不僅包含了標(biāo)準(zhǔn)的 TrueType 或 CFF 字形信息，還包含了可選的 SVG 數(shù)據(jù)，允許為字體定義顏色、漸變甚至是動(dòng)畫(huà)效果。SVG 標(biāo)準(zhǔn)中的配色信息也將存儲(chǔ)在 CPAL 中。

2. COLR + CPAL，由微軟主導(dǎo)的矢量字體標(biāo)準(zhǔn)。其中包含 COLR 即字形圖層數(shù)據(jù) 和 CPAL配色信息表 ，對(duì)其的支持集成在 Windows 8.1 及之后的版本中。

3. CBDT + CBLC，由 Google 主導(dǎo)的位圖字體標(biāo)準(zhǔn)。其中包含了 CBDT彩色外形位圖數(shù)據(jù) 和 CBLC位圖定位數(shù)據(jù) ，對(duì)其的支持集成在 Android 中。

4. SBIX，由 Apple 主導(dǎo)的位圖字體標(biāo)準(zhǔn)。SBIX 即標(biāo)準(zhǔn)位圖圖像表 其中包含了 PNG、JPEG 或 TIFF 的圖片信息，對(duì)其的支持集成在 macOS 和 iOS 中。

瀏覽器對(duì)各種標(biāo)準(zhǔn)的支持

瀏覽器	支持標(biāo)準(zhǔn)
Microsoft Edge (38+, Win 10)	SVG, SBIX, COLR, CBDT
Firefox (26+)	SVG, COLR
Safari	SBIX, COLR
Chrome	CBDT
Internet Explorer (Win 8.1)	COLR

數(shù)據(jù)來(lái)源 www.colorfonts.wtf

看到這么多種標(biāo)準(zhǔn)，參差不齊的瀏覽器支持，你可能會(huì)想難道又要根據(jù)UA派發(fā)不同格式字體做兼容么？告辭！

少俠且慢！

在 2016 年的時(shí)候，各大廠(chǎng)商最終同意使用 OpenType SVG 作為彩色字體的標(biāo)準(zhǔn)，也就是上面提到的 SVG，也是 W3C 目前所用的標(biāo)準(zhǔn) 。相信在不久各大廠(chǎng)家瀏覽器將逐步支持 W3C 所用的 SVG 標(biāo)準(zhǔn)。

字體模塊標(biāo)準(zhǔn)的現(xiàn)狀

CSS Fonts Module Level 3  ：目前處于候選推薦狀態(tài)，是主流瀏覽器都已大部分實(shí)現(xiàn)的標(biāo)準(zhǔn)，新一版候選標(biāo)準(zhǔn)發(fā)表于今年的 6 月 26 日。Level 3 標(biāo)準(zhǔn)基于之前的 CSS3 Fonts 以及 CSS3 Web Fonts，并將字體加載事件相關(guān)的標(biāo)準(zhǔn)移入CSS Font Loading  模塊中。

CSS Fonts Module Level 4：Level 3 的下一代標(biāo)準(zhǔn)，目前處于工作組草案狀態(tài)，最近一次草案更新于 4 月 10日。該版本草案基于 Level 3，新增的屬性中比較新穎的功能，也就是本文將要介紹彩色字體（Color Font）的支持。

CSS 彩色字體相關(guān)標(biāo)準(zhǔn)

在支持彩色字體的瀏覽器中，雖然能夠正確渲染，但是你卻無(wú)法控制使用字體中內(nèi)置的其他配色。那么在 Level 4 標(biāo)準(zhǔn)中，就新增了一些彩色字體相關(guān)的標(biāo)準(zhǔn)讓我們能夠更好地使用。接下來(lái)我們就來(lái)看看吧。

選擇字體配色：font-palette

前面我們了解到，彩色字體通過(guò) CPAL 表是可以擁有多種不同的配色方案的。font-palette 有三個(gè)內(nèi)置的參數(shù)以及支持自定義配色來(lái)達(dá)到修改配色方案的效果。

1. normal：瀏覽器盡可能地將該字體當(dāng)作非彩色字體進(jìn)行渲染，并選擇一個(gè)最適合閱讀的配色方案。瀏覽器在做決策時(shí)還可能將當(dāng)前設(shè)定的字體顏色color加入決策條件中。還有可能自動(dòng)生成一組未內(nèi)置在字體中的配色方案進(jìn)行渲染。

2. light：一些彩色字體在其元數(shù)據(jù)中標(biāo)明某個(gè)配色方案適用于亮色（接近于白色）背景中。使用此數(shù)值，瀏覽器將會(huì)直接使用標(biāo)記了該特性的首個(gè)配色方案進(jìn)行渲染。如果字體文件格式無(wú)元數(shù)據(jù)或時(shí)元數(shù)據(jù)中未標(biāo)記相應(yīng)的配色方案，那么此時(shí)該數(shù)值的行為與 normal 相同。

3. dark：正好與light 相反。

4. 自定義：上面我們介紹了三種基本的配色選擇，那么如果要使用其他的配色方案或是要自定義，我們將要借助接下來(lái)介紹的@font-palette-values的幫助。

示例：

h2 {
    font-family: Segoe UI Emojil
    font-palette: light
}

自定義字體配色：@font-palette-values

@font-palette-values 用于定義指定字體的配色規(guī)則。它允許開(kāi)發(fā)者不僅可以自由選擇字體內(nèi)置的各種配色方案，還能自定義配色方案。而font-palette 選擇自定義配色方案也是通過(guò)本規(guī)則設(shè)置。

它的基本定義規(guī)則是@font-palette-values name ，name 為本配色規(guī)則的自定義名稱(chēng)。

下面通過(guò)其中的三個(gè)關(guān)鍵屬性進(jìn)行解釋。

font-family

首先，在為字體設(shè)置配色時(shí)，我們先要指定這些配色信息是設(shè)定在哪個(gè)字體上的。通過(guò)font-family 即可將當(dāng)前配色配置綁定到某個(gè)字體上。

@font-palette-values Snow {
    font-family: TriColor;
}

base-palette

在作者制作彩色字體時(shí)，往往內(nèi)置了很多種字體配色，存儲(chǔ)這些信息時(shí)，每個(gè)不同的配色方案有自己對(duì)應(yīng)的id ，或者叫做index 。使用base-palette 進(jìn)行選擇。

@font-palette-values Snow {
    font-family: TriColor;
    base-palette: 5;
}

color-x

圖片來(lái)源 typography.guru

上圖展示了 COLR 對(duì)字形的分層。 COLR 將字形的多個(gè)部分分為多個(gè)圖層，并按照特定的順序?qū)D層合并成為一個(gè)完整的字體。每一個(gè)圖層都由 CPAL 中的配色信息進(jìn)行上色。為了達(dá)到更強(qiáng)大的自定義效果，標(biāo)準(zhǔn)中使用color-x 屬性提供對(duì)特定圖層顏色進(jìn)行復(fù)寫(xiě)的能力。其中的x 即為圖層id 。

@font-palette-values RedSnow {
    font-family: TriColor;
    base-palette: 5;
    color-1: rgb(255, 0, 0);
}

上述例子展示了如何通過(guò)color-x 對(duì)圖層顏色進(jìn)行復(fù)寫(xiě)。通過(guò)base-palette: 5 選取自帶的配色，并通過(guò)color-1: rgb(255, 0, 0) 將該配色中id 為1的圖層顏色修改為紅色。

Level 4 其他值得注意的新屬性

font-min-size, font-max-size

與屬性名稱(chēng)描述的一樣，這兩個(gè)屬性將限制font-size 最終的數(shù)值。如果font-size 的計(jì)算值超出設(shè)定的較大和最小值，font-size 的最終數(shù)值將會(huì)被直接修改為font-min-size 或font-max-size 。 這對(duì)于響應(yīng)式設(shè)計(jì)來(lái)說(shuō)是比較有用的，將字體大小限制在一個(gè)范圍，使得字體不會(huì)變的過(guò)大或過(guò)小。

css的全稱(chēng)是什么

css的全稱(chēng)是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。

關(guān)于使用CSS怎么實(shí)現(xiàn)一個(gè)彩色字體就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文名稱(chēng)：使用CSS怎么實(shí)現(xiàn)一個(gè)彩色字體-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://chinadenli.net/article24/cosice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、標(biāo)簽優(yōu)化、網(wǎng)站排名、商城網(wǎng)站

廣告

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