使用 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,使可變字型變成動畫,以回應聲音、環境光或電腦系統主題的變化。 可變字型軸也使得可變字型更容易動畫化。 

包含形狀的圖片
在軸的值範圍間移動可變字型可實現動畫,以 Adobe Fonts 的 Snug Variable 顯示。

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


相關資源 

Adobe, Inc.

更快、更輕鬆地獲得協助

新的使用者?