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

鑰匙要點(diǎn)

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

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

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

>直到2012年CSS3字體模塊到達(dá)字體，字體下載才變得可行。實(shí)施后，網(wǎng)頁下載的字體只能在該頁面上使用，而不會復(fù)制到操作系統(tǒng)。字體下載允許瀏覽器下載和使用遠(yuǎn)程字體，這意味著Web設(shè)計人員現(xiàn)在可以使用未安裝在用戶計算機(jī)上的字體。當(dāng)Web設(shè)計人員找到他們希望使用的字體時，他們只需要在Web服務(wù)器上包含字體文件，并且在需要時會自動將其下載給用戶。使用 @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。每個都有自己的優(yōu)勢和缺點(diǎ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ī)可伸縮字體格式）的

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

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

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

>

使用變量字體

當(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)瀏覽器無法修改字形的形狀或在可能的時候自動化時。在支持字體 - 光學(xué)尺寸的瀏覽器上，將值設(shè)置為自動的字體可以像下圖中的字體一樣變化：



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

>字體風(fēng)格

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

> font-weight

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

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

>

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

標(biāo)題和

段落。

請參閱codepen上的sitePoint（@sitepoint）的筆變量字體。

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

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

> 然后，我們需要創(chuàng)建一個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>

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

>

使用字體變量 - 安排
使用變量字體的第二種方法是使用Font-variation-settings CSS屬性。引入了此屬性，以通過指定要變化的功能的四個字母軸名稱及其變化值來提供對Opentype或TrueType字體變化的控制。目前，我們可以訪問該字體的以下方面：
wght - 重量，它與字體權(quán)限CSS屬性相同。該值可以是1到999的任何東西。
• >
wdth - 寬度，與Font-Strettret CSS屬性相同。它可以使用關(guān)鍵字或百分比值。該軸通常由字體設(shè)計器定義以優(yōu)雅地擴(kuò)展或凝結(jié)。
• opsz - 光學(xué)尺寸，可以使用字體 - 光學(xué)尺寸屬性打開和關(guān)閉。
斜體 - 斜體化，該斜體由字體式CSS屬性控制為斜體時。
• >
> slnt - 傾斜，與字體式CSS屬性相同，當(dāng)它設(shè)置為傾斜時。它將默認(rèn)為20度傾斜，但也可以接受-90DEG和90DEG之間的指定度。
• 根據(jù)規(guī)范，此屬性是一個低級功能，旨在處理特殊情況，在該特殊情況下，沒有其他方法可以啟用或訪問Opentype字體功能。因此，我們應(yīng)該嘗試使用 @font-face。
使用與上述相同的網(wǎng)頁和字體，讓我們嘗試使用低級控制器在我們的字體上設(shè)置重量和寬度：
請參見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)勢。 avenirnext_variable.ttf字體文件僅為89kb，但創(chuàng)建了一系列權(quán)重?？杀容^的標(biāo)準(zhǔn)字體可能具有較小的文件，但只能支持一種重量和樣式。進(jìn)一步的選項需要其他文件并相應(yīng)地提高頁面權(quán)重。
，但是我們可以走得更遠(yuǎn)。當(dāng)我們談?wù)撟煮w格式時，我們說WOFF2文件本質(zhì)上是帶有額外壓縮的TTF文件。 WOFF2文件較小，因?yàn)樗鼈兪褂米远x預(yù)處理和壓縮算法來交付約30％的文件大小比其他格式的文件大小。

>

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

在工具的官方GitHub頁面上，我們可以找到有關(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>

>我們最終得到了一個42KB文件，該文件將文件大小減半。要使用此文件，我們只需要修改來源文件及其格式即可容納此新文件：>
>現(xiàn)在，我們有一個42KB文件，該文件可用于我們頁面上的所有字體權(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)了一個。 > 為了解決這個問題，我們需要為這些瀏覽器提供不可變化，或者使用操作系統(tǒng)字體后備。> 支持變量字體的瀏覽器將下載標(biāo)記為格式（'Woff2-variations'）的文件，而不會下載單式字體標(biāo)記為格式（'ttf'）的瀏覽器。這是可能的，因?yàn)槲覀兛梢栽诿總€規(guī)則中重復(fù)引用變量。如果第一個失敗，則將加載第二個。就像以下內(nèi)容一樣：

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

請參閱Codepen上的SitePoint（@sitepoint）的Pen多個字體。

如果我們在支持變量字體的瀏覽器上檢查結(jié)果，例如Chrome，我們可以看到以下內(nèi)容：>

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

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

>

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

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

>

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

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

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

>哪些流行變量字體？

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

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

>

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

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

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

>

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

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