可變字體：它們是什麼，以及如何使用它們

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

鑰匙要點

與Opentype可伸縮字體格式捆綁在一起的可變字體，允許單個字體像多個字體一樣表現，並在字體本身中定義了變化，簡化了字體結構並改善了性能。 可以使用字體 - 光學尺寸，字體風格，字體重量和字體 - 伸展來實現可變字體，以控制標準軸，或用於通過OPENTYPE或TRUETYPE低級控制的Font-variation-Settings CSS屬性字體變體。

性能是可變字體的關鍵優勢，其單個字體文件能夠創建一系列權重，從而大大減少頁面權重。 WOFF2文件格式可以進一步壓縮這些字體，從而提供其他性能優勢。
• 瀏覽器對可變字體的支持仍然有限，並且可能需要用於不支持可變字體的瀏覽器。這可能涉及提供不可變化的字體或使用操作系統字體後備。 >
我們如何到達這裡
創建HTML時，每個Web瀏覽器的設置僅控製字體和样式。在90年代中期，創建了基於屏幕媒體的第一個字體：佐治亞州和威爾達納。這些以及系統字體（Arial，Times New Roman和Helvetica）是唯一可用於Web瀏覽器的字體（不是唯一的字體，而是我們在每個操作系統中都能找到的字體）。 隨著Web瀏覽器的演變，Netscape Navigator上的標籤之類的創新和第一個CSS規範允許Web頁面控制顯示的字體。但是，這些字體需要安裝在用戶的計算機上。
• >
>在1998年，CSS工作組提出了 @font-face規則的支持，以允許在網頁上渲染任何字體。 IE4實施了該技術，但字體分佈到每個用戶的瀏覽器提出的許可和盜版問題。
• 2000年代初期，圖像替換技術的興起將HTML含量用樣式的文本圖像代替。每個文本都必須在Photoshop之類的程序中切成薄片。該技術具有允許設計人員使用可用的任何字體而無需處理字體許可的主要優點。
>

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

>直到2012年CSS3字體模塊到達字體，字體下載才變得可行。實施後，網頁下載的字體只能在該頁面上使用，而不會復製到操作系統。字體下載允許瀏覽器下載和使用遠程字體，這意味著Web設計人員現在可以使用未安裝在用戶計算機上的字體。當Web設計人員找到他們希望使用的字體時，他們只需要在Web服務器上包含字體文件，並且在需要時會自動將其下載給用戶。使用 @font-face規則引用了這些字體。
>要使用 @font-face規則，我們必須定義字體名稱並指向字體文件：

<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。每個都有自己的優勢和缺點。簡而言之，EOT是由Microsoft創建的，僅受Internet Explorer的支持。 TTF是Microsoft和Apple創建的基本類型字體，它在任何地方都可以正常工作。 SVG基於圖像替換技術，僅適用於網絡。最後，Woff和Woff2也是專門為Web創建的，基本上是帶有額外壓縮的TTF文件。

>

>變量字體

Opentype（計算機可伸縮字體格式）的

>版本1.8於2016年發布。一項全新的技術：Opentype字體變體，也稱為可變字體。

>該技術允許單個字體的行為像多種字體一樣。它是通過定義字體內的變化來完成的。這些變化源於每個角色只有一個大綱的事實。構建此大綱的觀點有關於如何表現的指示。沒有必要定義多個字體權重，因為它們可以在非常狹窄和非常寬的定義之間插值。這也使得在介於兩者之間的樣式中也可以，例如，半折和粗體。這些變化可能沿字體的一個或多個軸作用。在下圖上，我們在字母A上有一個大綱插值的示例。

為什麼可變字體相關？ > 可變字體可以為我們的字體結構和性能改進帶來簡單性。以我們的網站需要五種字體樣式的情況為例。提供能夠渲染這五種樣式的單個變量字體要比加載五個不同的字體文件要小得多，更快。

>

使用變量字體

當前有兩種不同的使用可變字體的方法。首先，我們將研究實施這些實施的現代方式。 CSS規範強烈使用字體 - 光學尺寸，字體風格，字體權重和字體 - 拉伸來控制任何標準軸。

>字體 - 光學尺寸
此屬性允許開發人員控制瀏覽器是否呈現具有略有不同視覺表示的文本，以優化不同尺寸的觀看。它可以不採用該值，因為當瀏覽器無法修改字形的形狀或在可能的時候自動化時。在支持字體 - 光學尺寸的瀏覽器上，將值設置為自動的字體可以像下圖中的字體一樣變化：



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

>字體風格

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

> font-weight

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

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

>

在此示例中，我創建了一個非常簡單的頁面，並使用一個

標題和

段落。

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

當前，我們未經風格的網頁看起來像這樣：

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

> 然後，我們需要創建一個CSS文件來加載此新字體：>

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

由於瀏覽器支持問題，此示例僅在Safari和Chrome中應用字體變化。



>使用字體加載，我們現在可以使用字體權重屬性來操縱我們可變字體的重量軸。

<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）的筆源變量字體。
>大多數時候我們還需要兩個不同的字體文件：一個用於斜體，一個用於常規字體（羅馬）。之所以發生這種情況，是因為這些字體的構造可能會完全不同。

>

使用字體變量 - 安排
使用變量字體的第二種方法是使用Font-variation-settings CSS屬性。引入了此屬性，以通過指定要變化的功能的四個字母軸名稱及其變化值來提供對Opentype或TrueType字體變化的控制。目前，我們可以訪問該字體的以下方面：
wght - 重量，它與字體權限CSS屬性相同。該值可以是1到999的任何東西。
• >
wdth - 寬度，與Font-Strettret CSS屬性相同。它可以使用關鍵字或百分比值。該軸通常由字體設計器定義以優雅地擴展或凝結。
• opsz - 光學尺寸，可以使用字體 - 光學尺寸屬性打開和關閉。
斜體 - 斜體化，該斜體由字體式CSS屬性控制為斜體時。
• >
> slnt - 傾斜，與字體式CSS屬性相同，當它設置為傾斜時。它將默認為20度傾斜，但也可以接受-90DEG和90DEG之間的指定度。
• 根據規範，此屬性是一個低級功能，旨在處理特殊情況，在該特殊情況下，沒有其他方法可以啟用或訪問Opentype字體功能。因此，我們應該嘗試使用 @font-face。
使用與上述相同的網頁和字體，讓我們嘗試使用低級控制器在我們的字體上設置重量和寬度：
請參見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>

性能

性能是可變字體的關鍵優勢。 avenirnext_variable.ttf字體文件僅為89kb，但創建了一系列權重。可比較的標準字體可能具有較小的文件，但只能支持一種重量和样式。進一步的選項需要其他文件並相應地提高頁面權重。
，但是我們可以走得更遠。當我們談論字體格式時，我們說WOFF2文件本質上是帶有額外壓縮的TTF文件。 WOFF2文件較小，因為它們使用自定義預處理和壓縮算法來交付約30％的文件大小比其他格式的文件大小。

>

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

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

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

<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文件，該文件將文件大小減半。要使用此文件，我們只需要修改來源文件及其格式即可容納此新文件：>
>現在，我們有一個42KB文件，該文件可用於我們頁面上的所有字體權重。 WOFF2格式的唯一缺點是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>

>一些現代瀏覽器已經支持變量字體（Firefox開發人員版本具有一定程度的支持，Chrome 62，Chrome Android，Safari IOS和Safari），但可能有些情況下，我們發現了一個。 > 為了解決這個問題，我們需要為這些瀏覽器提供不可變化，或者使用操作系統字體後備。 > 支持變量字體的瀏覽器將下載標記為格式（'Woff2-variations'）的文件，而不會下載單式字體標記為格式（'ttf'）的瀏覽器。這是可能的，因為我們可以在每個規則中重複引用變量。如果第一個失敗，則將加載第二個。就像以下內容一樣：

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

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

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

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

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

>

但是，如果我們仍然必須為不支持變量的瀏覽器提供不可變化的字體，那麼我們是否會失去使用可變字體獲得的所有性能？如果瀏覽器只能加載標準字體，我們將失去可變字體的性能和渲染優勢。在這種情況下，最好是退回到可比的操作系統字體，而不是用許多固定字體代替。

結論
>儘管已經使用了幾年，但可變字體仍處於起步階段。瀏覽器支持很少，幾乎沒有字體可供選擇。但是，潛力是巨大的，可變字體將在簡化開發的同時允許更好的性能。例如，SitePoint自己的頭版目前加載了八個字體文件，總計為273kb。可變字體可以降低此依賴性並進一步減少頁面重量。

>

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

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

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

>哪些流行變量字體？

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

如何創建自己的變量字體？

>

創建自己的變量字體需要字體設計和知識特定軟件，例如Fontlab VI或字形。這些程序允許您設計字體的不同變化，並將它們導出為單個變量字體文件。但是，字體設計是一個複雜的過程，需要大量的練習和技能。

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

，而可變字體具有許多優勢，它們也有一些限制。並非所有字體都以可變格式可用，而並非所有瀏覽器都支持它們。此外，調整字體的變化可能很複雜，需要對CSS和字體設計有很好的了解。最後，雖然可變字體可以減小文件大小，但如果使用了許多變化，它們也可以增加文件大小。

>

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

以上是可變字體：它們是什麼，以及如何使用它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！