使用 Adobe Fonts 中的可變字體

可變字體是一種可靈活自訂的字體技術。Adobe Fonts 可變字體面板可讓您調整可變字體的外觀並選擇最適合專案的樣式。目前支援可變字體的 Creative Cloud 應用程式有 Photoshop、InDesign 和 Illustrator。

 

瀏覽 Adobe Fonts 中的可變字體

什麼是可變字體?

可變字體使用一個檔案來儲存多種字體樣式,這與靜態字體不同,靜態字體的每種可用樣式都使用單獨的檔案。它們可讓您為字體的每個設計軸指定一個值,使您可以控制字體外觀,而這是靜態字體無法做到的。 

傳統的靜態字體需要您新增或安裝您希望在專案中使用的每種樣式。例如,關於 Acumin Pro,您可以新增 Acumin Pro Regular、Acumin Pro Italic 以及其他任何想要存取的樣式。Acumin Variable 包含 Acumin 的所有樣式,因此您只需要新增一種字體。 

圖形使用者介面,自動產生應用程式描述
Acumin Pro 這種靜態字體有超過 18 種個別樣式,每種樣式都需要新增才能使用。作為替代方案,Acumin Variable 具有傾斜、筆畫寬度和寬度軸,您可以透過一次字體新增進行自訂。

可變字體的每個設定稱為一個執行個體。執行個體是為快速存取而建立的預設集樣式。上圖所示的可變字體面板顯示 Acumin Variable 已設定為預設執行個體,所有可變字體在自訂之前都會回復為預定設定。  

面板下方是軸控制項。變數軸代表一連續範圍的樣式變化。一種可變字體可以包含多個變數軸。您可以將變數軸自訂為其最小或最大範圍內的任何數字。在 Acumin Variable 的範例中,軸是傾斜筆畫寬度寬度

如何在 Adobe Fonts 網站上使用可變字體

Adobe Fonts 網站中可變字體的每個系列詳細資料頁面都包含一個互動式文字工具和面板,可讓您將字體自訂為想要的樣式。您可以選擇一個預設集執行個體來快速操作或建立自己的執行個體。  

圖形使用者介面,自動產生應用程式描述

在網頁專案新增可變字體

若要在網頁專案中儲存可變字體,請選取系列頁面中可變字體面板上方的新增至網頁專案。確保選取正確的字體;一些可變字體在其系列中有其他字體。

圖形使用者介面,自動產生應用程式描述

選取在面板底部的複製 CSS 獲取與您建立的自訂執行個體對應的代碼。如果沒有自訂設定,代碼將反映預設執行個體。

圖形使用者介面,自動產生應用程式描述

您可以在自訂可變字體後將瀏覽器 URL 加入書籤,以便稍後重新存取您前一次的自訂設定,或者選取複製 URL 共享或儲存您的設定。

使用中的可變字體

可變字體的可自訂性使它們非常適合各種應用,從數位圖形到產品包裝甚至車輛貼膜。透過調整寬度,可以排列字體,使其在不規則表面上仍然清楚易讀。 

創意可變字體設定可以展現品牌個性或適用於通常不適合下三分之一圖形的長標題。  

一個人對著鏡頭微笑

傾斜、筆畫寬度和寬度軸用來調整 Obviously Variable 以符合車門板要求。Acumin Variable 用於較長的下三分之一標題。

您可以使用可變字體在廣告招牌和海報上建立視覺層次,或者在包裝設計中配合微小空間和奇怪形狀自訂可變字體。 

以城市為背景的廣告招牌
Acumin Variable 用於建立視覺層次

圖片包含文字、盥洗用品、乳液
Minion Variable 的筆畫寬度和視覺尺寸軸用於建立視覺層次

可變字體透過在段落對齊中建立更好的換行而大放異彩。特別是寬度軸,可以實現更有效、視覺滿意度更高的單字間距。  

文字描述
Kepler Variable 的寬度軸用於減少段落對齊中的可見間隙。紅色矩形顯示每個句子中減少的間距大小。

可變字體功能使它們在回應式網頁設計中有很好的視覺展示效果。一種可變字體能適應從小螢幕到大螢幕的尺寸調整,有助於保持較小的檔案大小並減少載入時間。 

包含文字、插座、螢幕擷圖的圖片
可變字體包含在一個字體檔案中,這使得它們在網頁的載入速度更快

自動產生圖表、文字描述
可以在網站中使用可變字體,它們能隨者螢幕尺寸的改變調整字體

可以將程式碼片段加入到您的 CSS,使可變字體變成動畫,以回應聲音、環境光或電腦系統主題的變化。可變字體軸也使得可變字體更容易動畫化。 

包含形狀的圖片
在軸的值範圍移動可變字體可以實現動畫

字體設計師繼續探索新方法,與這種字體技術互動並持續創新。


相關資源 

更快、更輕鬆地獲得協助

新的使用者?