在本文中，我們將查看圍繞變量字體的令人興奮的新可能性 - 現(xiàn)在與Opentype可伸縮字體格式捆綁在一起 - 允許單個(gè)字體像多個(gè)字體一樣行為。

鑰匙要點(diǎn)

與Opentype可伸縮字體格式捆綁在一起的可變字體，允許單個(gè)字體像多個(gè)字體一樣表現(xiàn)，并在字體本身中定義了變化，簡(jiǎn)化了字體結(jié)構(gòu)并改善了性能。 可以使用字體 - 光學(xué)尺寸，字體風(fēng)格，字體重量和字體 - 伸展來實(shí)現(xiàn)可變字體，以控制標(biāo)準(zhǔn)軸，或用于通過OPENTYPE或TRUETYPE低級(jí)控制的Font-variation-Settings CSS屬性字體變體。

性能是可變字體的關(guān)鍵優(yōu)勢(shì)，其單個(gè)字體文件能夠創(chuàng)建一系列權(quán)重，從而大大減少頁(yè)面權(quán)重。 WOFF2文件格式可以進(jìn)一步壓縮這些字體，從而提供其他性能優(yōu)勢(shì)。
• 瀏覽器對(duì)可變字體的支持仍然有限，并且可能需要用于不支持可變字體的瀏覽器。這可能涉及提供不可變化的字體或使用操作系統(tǒng)字體后備。>
我們?nèi)绾蔚竭_(dá)這里
創(chuàng)建HTML時(shí)，每個(gè)Web瀏覽器的設(shè)置僅控制字體和樣式。在90年代中期，創(chuàng)建了基于屏幕媒體的第一個(gè)字體：佐治亞州和威爾達(dá)納。這些以及系統(tǒng)字體（Arial，Times New Roman和Helvetica）是唯一可用于Web瀏覽器的字體（不是唯一的字體，而是我們?cè)诿總€(gè)操作系統(tǒng)中都能找到的字體）。 隨著Web瀏覽器的演變，Netscape Navigator上的標(biāo)簽之類的創(chuàng)新和第一個(gè)CSS規(guī)范允許Web頁(yè)面控制顯示的字體。但是，這些字體需要安裝在用戶的計(jì)算機(jī)上。
• >
>在1998年，CSS工作組提出了 @font-face規(guī)則的支持，以允許在網(wǎng)頁(yè)上渲染任何字體。 IE4實(shí)施了該技術(shù)，但字體分布到每個(gè)用戶的瀏覽器提出的許可和盜版問題。
• 2000年代初期，圖像替換技術(shù)的興起將HTML含量用樣式的文本圖像代替。每個(gè)文本都必須在Photoshop之類的程序中切成薄片。該技術(shù)具有允許設(shè)計(jì)人員使用可用的任何字體而無(wú)需處理字體許可的主要優(yōu)點(diǎn)。
>

> 2008年， @font-face終于卷土重來了，當(dāng)Apple Safari和Mozilla Firefox實(shí)施它時(shí)。這是出于為設(shè)計(jì)人員和開發(fā)人員提供自定義字體而不是無(wú)法訪問的圖像的簡(jiǎn)單方法的必要性。

>直到2012年CSS3字體模塊到達(dá)字體，字體下載才變得可行。實(shí)施后，網(wǎng)頁(yè)下載的字體只能在該頁(yè)面上使用，而不會(huì)復(fù)制到操作系統(tǒng)。字體下載允許瀏覽器下載和使用遠(yuǎn)程字體，這意味著Web設(shè)計(jì)人員現(xiàn)在可以使用未安裝在用戶計(jì)算機(jī)上的字體。當(dāng)Web設(shè)計(jì)人員找到他們希望使用的字體時(shí)，他們只需要在Web服務(wù)器上包含字體文件，并且在需要時(shí)會(huì)自動(dòng)將其下載給用戶。使用 @font-face規(guī)則引用了這些字體。
>要使用 @font-face規(guī)則，我們必須定義字體名稱并指向字體文件：

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

字體文件可以是五種不同格式之一：TTF，WOFF，WOFF2，SVG或EOT。每個(gè)都有自己的優(yōu)勢(shì)和缺點(diǎn)。簡(jiǎn)而言之，EOT是由Microsoft創(chuàng)建的，僅受Internet Explorer的支持。 TTF是Microsoft和Apple創(chuàng)建的基本類型字體，它在任何地方都可以正常工作。 SVG基于圖像替換技術(shù)，僅適用于網(wǎng)絡(luò)。最后，Woff和Woff2也是專門為Web創(chuàng)建的，基本上是帶有額外壓縮的TTF文件。

>

>變量字體

Opentype（計(jì)算機(jī)可伸縮字體格式）的

>版本1.8于2016年發(fā)布。一項(xiàng)全新的技術(shù)：Opentype字體變體，也稱為可變字體。

>該技術(shù)允許單個(gè)字體的行為像多種字體一樣。它是通過定義字體內(nèi)的變化來完成的。這些變化源于每個(gè)角色只有一個(gè)大綱的事實(shí)。構(gòu)建此大綱的觀點(diǎn)有關(guān)于如何表現(xiàn)的指示。沒有必要定義多個(gè)字體權(quán)重，因?yàn)樗鼈兛梢栽诜浅＊M窄和非常寬的定義之間插值。這也使得在介于兩者之間的樣式中也可以，例如，半折和粗體。這些變化可能沿字體的一個(gè)或多個(gè)軸作用。在下圖上，我們?cè)谧帜窤上有一個(gè)大綱插值的示例。

為什么可變字體相關(guān)？> 可變字體可以為我們的字體結(jié)構(gòu)和性能改進(jìn)帶來簡(jiǎn)單性。以我們的網(wǎng)站需要五種字體樣式的情況為例。提供能夠渲染這五種樣式的單個(gè)變量字體要比加載五個(gè)不同的字體文件要小得多，更快。

>

使用變量字體

當(dāng)前有兩種不同的使用可變字體的方法。首先，我們將研究實(shí)施這些實(shí)施的現(xiàn)代方式。 CSS規(guī)范強(qiáng)烈使用字體 - 光學(xué)尺寸，字體風(fēng)格，字體權(quán)重和字體 - 拉伸來控制任何標(biāo)準(zhǔn)軸。

>字體 - 光學(xué)尺寸
此屬性允許開發(fā)人員控制瀏覽器是否呈現(xiàn)具有略有不同視覺表示的文本，以優(yōu)化不同尺寸的觀看。它可以不采用該值，因?yàn)楫?dāng)瀏覽器無(wú)法修改字形的形狀或在可能的時(shí)候自動(dòng)化時(shí)。在支持字體 - 光學(xué)尺寸的瀏覽器上，將值設(shè)置為自動(dòng)的字體可以像下圖中的字體一樣變化：



>將值設(shè)置為none，字體不會(huì)有變化。>

>字體風(fēng)格

>該屬性指定字體是否應(yīng)以正常，斜體或斜面的面部為單位。它可以采用正常，斜體或傾斜的值。

> font-weight

此屬性指定字體的重量（或粗體）。要注意的一件事是，使用普通字體，可以定義命名實(shí)例。例如，BOLD與字體重量相同：700或超燈與字體重量相同：200。字體重量屬性也可以是1到1000之間的任何數(shù)字，但是由于使用變量字體，因此極性，我們可以具有更細(xì)的粒度。例如，現(xiàn)在可以使用類似字體重量的值：200.01。

> font-tretch
此屬性從字體中選擇一個(gè)普通，凝結(jié)或展開的面部。就像字體重量屬性一樣，它可以是一個(gè)命名的實(shí)例，例如超固定或正?；虬俜直仍?％至100％之間。此外，命名實(shí)例將映射為已知百分比。例如，傳遞的超敏將映射到62.5％。

>

在此示例中，我創(chuàng)建了一個(gè)非常簡(jiǎn)單的頁(yè)面，并使用一個(gè)

標(biāo)題和

段落。

請(qǐng)參閱codepen上的sitePoint（@sitepoint）的筆變量字體。

當(dāng)前，我們未經(jīng)風(fēng)格的網(wǎng)頁(yè)看起來像這樣：

>
要使用變量字體，我們必須找到合適的文件。 V-Fonts項(xiàng)目提供了一個(gè)字體存儲(chǔ)庫(kù)，我們可以在其中搜索和實(shí)驗(yàn)所有類型的可變字體。我決定使用avenirnext字體，然后從其官方的github頁(yè)面鏈接它。

> 然后，我們需要?jiǎng)?chuàng)建一個(gè)CSS文件來加載此新字體：>

參見codepen上的sitepoint（@sitepoint）的筆的變量字體。

由于瀏覽器支持問題，此示例僅在Safari和Chrome中應(yīng)用字體變化。



>使用字體加載，我們現(xiàn)在可以使用字體權(quán)重屬性來操縱我們可變字體的重量軸。

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

>請(qǐng)參閱codepen上的sitepoint（@sitepoint）的筆源變量字體。
>大多數(shù)時(shí)候我們還需要兩個(gè)不同的字體文件：一個(gè)用于斜體，一個(gè)用于常規(guī)字體（羅馬）。之所以發(fā)生這種情況，是因?yàn)檫@些字體的構(gòu)造可能會(huì)完全不同。

>

使用字體變量 - 安排
使用變量字體的第二種方法是使用Font-variation-settings CSS屬性。引入了此屬性，以通過指定要變化的功能的四個(gè)字母軸名稱及其變化值來提供對(duì)Opentype或TrueType字體變化的控制。目前，我們可以訪問該字體的以下方面：
wght - 重量，它與字體權(quán)限CSS屬性相同。該值可以是1到999的任何東西。
• >
wdth - 寬度，與Font-Strettret CSS屬性相同。它可以使用關(guān)鍵字或百分比值。該軸通常由字體設(shè)計(jì)器定義以優(yōu)雅地?cái)U(kuò)展或凝結(jié)。
• opsz - 光學(xué)尺寸，可以使用字體 - 光學(xué)尺寸屬性打開和關(guān)閉。
斜體 - 斜體化，該斜體由字體式CSS屬性控制為斜體時(shí)。
• >
> slnt - 傾斜，與字體式CSS屬性相同，當(dāng)它設(shè)置為傾斜時(shí)。它將默認(rèn)為20度傾斜，但也可以接受-90DEG和90DEG之間的指定度。
• 根據(jù)規(guī)范，此屬性是一個(gè)低級(jí)功能，旨在處理特殊情況，在該特殊情況下，沒有其他方法可以啟用或訪問Opentype字體功能。因此，我們應(yīng)該嘗試使用 @font-face。
使用與上述相同的網(wǎng)頁(yè)和字體，讓我們嘗試使用低級(jí)控制器在我們的字體上設(shè)置重量和寬度：
請(qǐng)參見codepen上的sitepoint（@sitepoint）的筆變量字體1。
聲明等于以下CSS聲明：>

<span><span>@font-face</span> {
</span>  <span>font-family: Avenir Next Variable;
</span>  <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>

性能

性能是可變字體的關(guān)鍵優(yōu)勢(shì)。 avenirnext_variable.ttf字體文件僅為89kb，但創(chuàng)建了一系列權(quán)重?？杀容^的標(biāo)準(zhǔn)字體可能具有較小的文件，但只能支持一種重量和樣式。進(jìn)一步的選項(xiàng)需要其他文件并相應(yīng)地提高頁(yè)面權(quán)重。
，但是我們可以走得更遠(yuǎn)。當(dāng)我們談?wù)撟煮w格式時(shí)，我們說WOFF2文件本質(zhì)上是帶有額外壓縮的TTF文件。 WOFF2文件較小，因?yàn)樗鼈兪褂米远x預(yù)處理和壓縮算法來交付約30％的文件大小比其他格式的文件大小。

>

Google提供了一個(gè)命令行工具，該工具將壓縮我們的文件將其轉(zhuǎn)換為woff2格式。

在工具的官方GitHub頁(yè)面上，我們可以找到有關(guān)它的所有信息。要在UNIX環(huán)境中安裝它，我們可以使用以下命令：>

安裝后，我們可以使用以下方式使用它來壓縮我們的變量字體文件

<span><span>@font-face</span> {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>src: <span>url('AvenirNext_Variable.ttf')</span> format('truetype');
</span><span>}
</span>
<span>body {
</span>  <span>font-family: 'Avenir Next Variable', sans-serif;
</span><span>}
</span>

>我們最終得到了一個(gè)42KB文件，該文件將文件大小減半。要使用此文件，我們只需要修改來源文件及其格式即可容納此新文件：>
>現(xiàn)在，我們有一個(gè)42KB文件，該文件可用于我們頁(yè)面上的所有字體權(quán)重。 WOFF2格式的唯一缺點(diǎn)是Internet Explorer不支持它。

<span>h1 {
</span>  <span>font-family: 'Avenir Next Variable';
</span>  <span>font-weight: 430;
</span><span>}
</span>

>

>為不同的瀏覽器提供不同的文件

<span>p {
</span>  <span>font-variation-settings: 'wght' 630, 'wdth' 88;
</span><span>}
</span>

>一些現(xiàn)代瀏覽器已經(jīng)支持變量字體（Firefox開發(fā)人員版本具有一定程度的支持，Chrome 62，Chrome Android，Safari IOS和Safari），但可能有些情況下，我們發(fā)現(xiàn)了一個(gè)。 > 為了解決這個(gè)問題，我們需要為這些瀏覽器提供不可變化，或者使用操作系統(tǒng)字體后備。> 支持變量字體的瀏覽器將下載標(biāo)記為格式（'Woff2-variations'）的文件，而不會(huì)下載單式字體標(biāo)記為格式（'ttf'）的瀏覽器。這是可能的，因?yàn)槲覀兛梢栽诿總€(gè)規(guī)則中重復(fù)引用變量。如果第一個(gè)失敗，則將加載第二個(gè)。就像以下內(nèi)容一樣：

下一個(gè)示例使用我們正在使用的文件格式的不同文件格式，但使用相同的原理：

請(qǐng)參閱Codepen上的SitePoint（@sitepoint）的Pen多個(gè)字體。

如果我們?cè)谥С肿兞孔煮w的瀏覽器上檢查結(jié)果，例如Chrome，我們可以看到以下內(nèi)容：>

在不支持可變字體（例如Firefox）的瀏覽器上，將加載第二個(gè)字體，結(jié)果看起來像這樣：

<span>p {
</span>  <span>font-weight: 630;
</span>  <span>font-stretch: 88;
</span><span>}
</span>

>

但是，如果我們?nèi)匀槐仨殲椴恢С肿兞康臑g覽器提供不可變化的字體，那么我們是否會(huì)失去使用可變字體獲得的所有性能？如果瀏覽器只能加載標(biāo)準(zhǔn)字體，我們將失去可變字體的性能和渲染優(yōu)勢(shì)。在這種情況下，最好是退回到可比的操作系統(tǒng)字體，而不是用許多固定字體代替。

結(jié)論
>盡管已經(jīng)使用了幾年，但可變字體仍處于起步階段。瀏覽器支持很少，幾乎沒有字體可供選擇。但是，潛力是巨大的，可變字體將在簡(jiǎn)化開發(fā)的同時(shí)允許更好的性能。例如，SitePoint自己的頭版目前加載了八個(gè)字體文件，總計(jì)為273kb?？勺冏煮w可以降低此依賴性并進(jìn)一步減少頁(yè)面重量。

>

經(jīng)常詢問有關(guān)可變字體的問題（常見問題解答）
使用可變字體的優(yōu)點(diǎn)是什么？首先，它們提供了與單個(gè)字體文件的廣泛變化，這些文件可以顯著降低文件大小并提高網(wǎng)站的加載速度。這對(duì)于可能有限的數(shù)據(jù)計(jì)劃的移動(dòng)用戶特別有益。其次，可變字體允許更具創(chuàng)造力和響應(yīng)式設(shè)計(jì)。設(shè)計(jì)人員可以調(diào)整字體的重量，寬度，傾斜和其他屬性，以創(chuàng)建獨(dú)特而動(dòng)態(tài)的視覺體驗(yàn)。最后，可變字體可以通過允許對(duì)字體渲染的精細(xì)調(diào)整來提高文本的可讀性，尤其是在小屏幕或低分辨率設(shè)備上。 >在CSS中實(shí)現(xiàn)可變字體涉及幾個(gè)步驟。首先，您需要使用 @font-face規(guī)則導(dǎo)入變量字體文件。然后，您可以使用“字體變化 - 插條”屬性來調(diào)整字體的變化。例如，'字體變化 - 插圖：“ wght” 700;'將字體的重量設(shè)置為700。請(qǐng)記住，特定的變化標(biāo)簽（例如“ wght”重量）可能會(huì)根據(jù)字體而有所不同。

>到目前為止，所有瀏覽器都支持所有瀏覽器？但是，這些瀏覽器的較舊版本和一些不太常見的瀏覽器可能不支持它們。檢查可變字體的特定瀏覽器支持并為無(wú)支撐的瀏覽器提供后備字體總是一個(gè)好主意。

我可以使用Google字體使用可變字體？ 。當(dāng)您在Google字體上選擇字體時(shí)，您可以選擇“變量”選項(xiàng)以下載變量字體版本。然后，您可以在CSS中使用“字體變量 - 分配”屬性來調(diào)整字體的變化。

>哪些流行變量字體？

>有許多流行的變量字體可用，包括Roboto，Source SANS，Amstelvar和Decovar。這些字體提供了廣泛的變化，適合各種設(shè)計(jì)樣式。您可以在v-fonts.com或Google字體等網(wǎng)站上找到更多可變字體。

如何創(chuàng)建自己的變量字體？

>

創(chuàng)建自己的變量字體需要字體設(shè)計(jì)和知識(shí)特定軟件，例如Fontlab VI或字形。這些程序允許您設(shè)計(jì)字體的不同變化，并將它們導(dǎo)出為單個(gè)變量字體文件。但是，字體設(shè)計(jì)是一個(gè)復(fù)雜的過程，需要大量的練習(xí)和技能。

>可變字體的局限性是什么？

，而可變字體具有許多優(yōu)勢(shì)，它們也有一些限制。并非所有字體都以可變格式可用，而并非所有瀏覽器都支持它們。此外，調(diào)整字體的變化可能很復(fù)雜，需要對(duì)CSS和字體設(shè)計(jì)有很好的了解。最后，雖然可變字體可以減小文件大小，但如果使用了許多變化，它們也可以增加文件大小。

>

>可變字體如何改善Web性能？
可變字體可以通過降低來顯著提高Web性能。需要加載的字體文件數(shù)量。網(wǎng)站可以加載單個(gè)變量字體文件并根據(jù)需要調(diào)整變化，而不是為不同的字體權(quán)重和樣式加載多個(gè)文件。這可以降低文件大小并提高網(wǎng)站的加載速度。
可以動(dòng)畫變量字體嗎？
是的，可以使用CSS動(dòng)畫或過渡來對(duì)可變字體進(jìn)行動(dòng)畫。通過對(duì)“字體變量 - 插條”屬性進(jìn)行動(dòng)畫動(dòng)畫，您可以創(chuàng)建動(dòng)態(tài)文本效果，以隨著時(shí)間的推移而改變字體的重量，寬度，傾斜或其他屬性。是可變字體。 ？雖然很難預(yù)測(cè)Web版式的未來，但可變字體當(dāng)然具有發(fā)揮重要作用的潛力。它們的靈活性，效率和創(chuàng)造力使它們成為網(wǎng)頁(yè)設(shè)計(jì)師的強(qiáng)大工具。但是，它們的采用將取決于瀏覽器支持，可變字體的可用性以及設(shè)計(jì)師的需求和技能。

以上是可變字體：它們是什么，以及如何使用它們的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！