可變字體是一種可靈活自訂的字體技術。Adobe Fonts 可變字體面板可讓您調整可變字體的外觀並選擇最適合專案的樣式。目前支援可變字體的 Creative Cloud 應用程式有 Photoshop、InDesign 和 Illustrator。
什麼是可變字體?
可變字體使用一個檔案來儲存多種字體樣式,這與靜態字體不同,靜態字體的每種可用樣式都使用單獨的檔案。它們可讓您為字體的每個設計軸指定一個值,使您可以控制字體外觀,而這是靜態字體無法做到的。
傳統的靜態字體需要您新增或安裝您希望在專案中使用的每種樣式。例如,關於 Acumin Pro,您可以新增 Acumin Pro Regular、Acumin Pro Italic 以及其他任何想要存取的樣式。Acumin Variable 包含 Acumin 的所有樣式,因此您只需要新增一種字體。
可變字體的每個設定稱為一個執行個體。執行個體是為快速存取而建立的預設集樣式。上圖所示的可變字體面板顯示 Acumin Variable 已設定為預設執行個體,所有可變字體在自訂之前都會回復為預定設定。
面板下方是軸控制項。變數軸代表一連續範圍的樣式變化。一種可變字體可以包含多個變數軸。您可以將變數軸自訂為其最小或最大範圍內的任何數字。在 Acumin Variable 的範例中,軸是傾斜、筆畫寬度和寬度。
如何在 Adobe Fonts 網站上使用可變字體
Adobe Fonts 網站中可變字體的每個系列詳細資料頁面都包含一個互動式文字工具和面板,可讓您將字體自訂為想要的樣式。您可以選擇一個預設集執行個體來快速操作或建立自己的執行個體。


在網頁專案新增可變字體
若要在網頁專案中儲存可變字體,請選取系列頁面中可變字體面板上方的新增至網頁專案。確保選取正確的字體;一些可變字體在其系列中有其他字體。
選取在面板底部的複製 CSS 獲取與您建立的自訂執行個體對應的代碼。如果沒有自訂設定,代碼將反映預設執行個體。
您可以在自訂可變字體後將瀏覽器 URL 加入書籤,以便稍後重新存取您前一次的自訂設定,或者選取複製 URL 共享或儲存您的設定。
使用中的可變字體
可變字體的可自訂性使它們非常適合各種應用,從數位圖形到產品包裝甚至車輛貼膜。透過調整寬度,可以排列字體,使其在不規則表面上仍然清楚易讀。
創意可變字體設定可以展現品牌個性或適用於通常不適合下三分之一圖形的長標題。
傾斜、筆畫寬度和寬度軸用來調整 Obviously Variable 以符合車門板要求。Acumin Variable 用於較長的下三分之一標題。
您可以使用可變字體在廣告招牌和海報上建立視覺層次,或者在包裝設計中配合微小空間和奇怪形狀自訂可變字體。
可變字體透過在段落對齊中建立更好的換行而大放異彩。特別是寬度軸,可以實現更有效、視覺滿意度更高的單字間距。
可變字體功能使它們在回應式網頁設計中有很好的視覺展示效果。一種可變字體能適應從小螢幕到大螢幕的尺寸調整,有助於保持較小的檔案大小並減少載入時間。
可以將程式碼片段加入到您的 CSS,使可變字體變成動畫,以回應聲音、環境光或電腦系統主題的變化。可變字體軸也使得可變字體更容易動畫化。


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