從Google字體上充分利用可變字體

我花了多年的時間開發了遞歸的Sans＆Mono字體家庭（擁有一支出色的團隊！），終於在Google字體上使用！

想立即使用它嗎？這是Google字體的完整遞歸變量字體系列的嵌入式代碼（但為了獲得最佳的靈活性和性能，請繼續閱讀！）。

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

遞歸始於我在Kabk Typemedia的類型設計大師論文。後來，我的Foundry Arrow Type由Google字體委託完成並發布遞歸為開源字體。

探索遞歸及其在遞歸中的功能。

遞歸是一個用於網站和代碼的多功能字體家族，為開發人員和設計師提供了現代美學和尖端字體技術的融合。

讓我們澄清一下：可變字體在一個文件中包含一系列樣式，使用戶可以流暢地選擇樣式。這些範圍稱為變量軸，代表重量，寬度，光學大小，傾斜等參數。遞歸使您可以控制“單層面”（從單聲道到sans）和“休閒”（從線性到刷樣式）。每個字體家族都可以具有多個軸，這是一個關鍵的設計考慮。

Google字體添加了可變字體，但是許多（包括遞歸）提供的風格選項比默認接口顯示的更多。為了易於使用，Google字體簡化了顯示，主要顯示“重量”軸。但是，這隱藏了遞歸的64個預設樣式和五個可變軸。 Google字體頁面顯示了八種樣式和一個軸，而遞歸實際上提供了更多。

遞歸可以分為四個“亞家族”：

• SANS線性：標準比例sans-serif字體（在Google字體上顯示）。
• 隨意：比例的“刷子休閒”字體。
• 單線性：標準的單層字體。
• 單休休閒：單個“刷子休閒”字體。

可視化這比描述它容易。兩張表（一張用於sans，一個用於單聲道）說明了64個命名實例（此處未顯示為簡潔）。 Google字體接口僅顯示八個，加重軸。

鑑於Google字體的用戶群多樣化，這種僅重量的方法是可以理解的，但它限制了字體的潛力。 Google字體API提供了解決方案。

了解可變字體及其效率

Web開發人員知道不要為超大的JPEG服務。類似的原則適用於字體。子集字符並使用WOFF2壓縮減少文件大小。

可變字體就像視頻文件：它們包含可以修剪或“固定”到特定值的信息範圍（可變軸），從而減少了文件大小。與視頻不同，字體使用矢量形狀。可變字體具有多個“源位置”（密鑰幀）。樣式是通過在這些位置（Deltas）之間數學插值創建的。修剪可變字體意味著刪除不必要的三角洲。

例如，遞歸的休閒軸在“線性”和“休閒”字母形式之間插值。 Ampersand和Glyph動畫（此處未顯示）證明了這一點。

每個添加的軸通常將圖紙數增加一倍。 Google字體API可讓您僅選擇所需的軸，從而產生較小的文件尺寸。

可變軸標籤

軸縮寫是四個字母的標籤（Microsoft定義的軸的小寫，用於自定義軸的大寫）。存在五個標準軸：

• wght - 重量
• wdth - 寬度
• opsz - 光學尺寸
• ital - 斜體
• slnt - 傾斜

遞歸使用三個自定義軸（ MONO ， CASL ， CRSV ）加上wght和slnt 。

Google字體API

Google字體接口生成一個稱為Google字體API的URL。該網址有部分：

1. API URL（ https://fonts.googleapis.com/css2 ）
2. 字體家庭參數
3. font-display屬性

要使用遞歸（無線性）的常規重量，請使用：

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

或者，在html中：

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

然後，將字體應用於CSS：

 <code>body { font-family: 'Recursive', sans-serif; }</code>

默認軸值： MONO 0 ， CASL 0 ， wght 400 ， slnt 0 ， CRSV 0 。

指定樣式或軸

API提供了兩種方法：

1. 清單軸和特定值。
2. 清單軸和範圍。

要獲得休閒風格，請使用Recursive:CASL@1 。對於單休閒常規：

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

對於常規和大膽：

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google字體通常提供單個可變字體，涵蓋多種請求的樣式。為了生產，只需要求需要樣式。使用變量軸可提供靈活性。

獲取完整的變量字體

為了最大化靈活性，請使用變量軸。代替Recursive:wght@400;700 ，使用Recursive:[email protected] （或Recursive:[email protected] ）。按字母順序添加軸： Recursive:wght,[email protected],0..1 。

完整的可變字體URL：

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

在html中：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

平衡靈活性和文件大小

每個軸都會增加文件大小。省略未使用的軸。對於具有不同權重的單一休閒樣式：

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

（注意：以上可能無法正常運行。請參閱原始文章以獲取更新。）

可以添加多個字體系列，按名稱按字母順序排列。

使用可變字體

標準軸使用標準CSS屬性（ font-weight: 425; ）。所有軸都使用font-variation-settings 。對於單休閒風格的風格：

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings與CSS自定義屬性效果很好。

有關可變字體設計的更多詳細信息，請訪問variablefonts.io和CSS-tricks。

可變字體性能

使用所有64個遞歸樣式作為單獨的文件總計約6.4 MB。可變字體為〜537 kb。全重量範圍的子集遞歸WOFF2為60 kb；單一樣式為25 kb。使用三個權重用可變字體節省約15 kb。完整的可變字體子集為281 kb。除了文件大小之外，可變字體還提供設計靈活性。 Google字體優化字體傳遞。

原始文章的其餘部分是簡潔的，但它繼續提供有關使用API​​，探索其他變量字體並促進作者作品的其他信息。

以上是從Google字體上充分利用可變字體的詳細內容。更多資訊請關注PHP中文網其他相關文章！