自適應字體

從歷史上看，字體粗細和样式被分成不同的字體文件，需要設計人員為每種樣式上傳單獨的文件 - 到目前為止。透過適應性字體，單一字體的所有變體都合併到一個文件中，從而增強了網站效能，並使設計人員能夠個性化字體樣式，增強權威性和適應性。

在本次教學課程中，您將了解：

1. 適應性字體的概念 
2. 使用適應性字體和字體修改
3. 使用字體變化生成動畫過渡
4. 透過字體修改開發交互 
5. 常見問題及解決方案

適應性字體的概念 

適應性字體是包含完整字體系列（例如，Open Sans、Roboto Flex 等）的字體，而不僅僅是一種樣式或實例。以前，設計人員需要多個字體檔案來存取各種字體粗細（例如，Light 100、Bold 700 等），這種方法僅允許設計中的有限粒度，並且可能會損害網站效能。適應性字體涵蓋字體系列範圍內的所有粗細，使設計人員能夠以更高的複雜性和精度定製字體樣式。 

小建議： 您可以透過以下平台找到適應性字體 Google 字體, V字形， 和 豐泰斯克. 

此外，自適應字體提供了設計人員以前無法存取的沿多個軸的控制項（即字體屬性）。有5 個常用的軸來監督字體的公認的、可預見的屬性——粗細、寬度、光學尺寸、傾斜和斜體——但適應性字體還可以包含個性化的軸，這些軸決定了字體設計者所選的字體的其他設計元素－例如，字體的柔和度、筆畫粗細、上升部分的高度等。 

利用適應性字體和字體變體

開始之前： 確保您之前已在中上傳了自訂的自適應字體 站點設定 > 字體 標籤。透過像這樣的平台找到適應性字體是可行的 Google 字體, V字形， 和 豐泰斯克。了解有關上傳自訂字體的更多資訊。 

至關重要的： Webflow 支援 TTF、OTF、WOFF 和 WOFF2 格式的自適應字型。不支援 EOT 和 SVG 格式。 

要使用適應性字體並編寫字體變體： 

1. 選擇您想要在設計器畫布上進行樣式化的版面元件（例如標題、文字連結等）
2. 導航至 風格面板 > 版式 > 字體 下拉式選單並從中指定您的自適應字體 自訂字體 
3. 點擊旁邊的文字框 變化 顯示字體變化選單
4. 透過移動滑桿或在每個變體旁邊手動輸入數值來調整您喜歡的字體變體（例如，粗細、寬度等）

透過識別“快速識別適應性字體是可行的”點”，在字體選擇器中與它們一起出現。有關它們支援的變體數量的更多詳細信息，可以通過將滑鼠懸停在“點」。

記住： 如果您將字體粗細設定為 風格面板 > 版式 部分並隨後在粗細度軸上添加字體變體，該字體變體將取代先前指定的字體粗細度。 

至關重要的： 如果您調整字體變體並切換到另一種字體，則先前對原始字體所做的任何字體修改都會被刪除。

有用的提示： 您可以跨不同的媒體查詢（「斷點」）或上級元素定義不同的字體變體，以實現所有後代文字元素的字體變體。與其他版式特徵（例如，字體系列、字體大小、顏色等）一樣，字體變體是可繼承的屬性。

您可以透過啟動字體變體選單，將滑鼠懸停在要消除的變體（例如，粗細、寬度等）上，然後點擊“來刪除字體變體”垃圾" 圖示.

如何使用字體變體建立動畫過渡

您還可以為不同的元素情況（例如，浮動、聚焦等）設計字體變體，並在基本情況（「無」）和替代情況之間構成生動的過渡。

提醒： 在設計動畫過渡時請謹慎考慮可訪問性，並避免突然、不可預見或過度的移動。深入研究有關利用周到的動作和動畫的更多細節。

為特定情況開發字體變體：

1. 指出您想要格式化的元素
2. 打開 風格面板 > 選擇器 場地
3. 如果尚未套用任何類別或標籤，則為您的元素賦予流派或選擇其 HTML 標籤
4. 點選 向下的箭頭 來展開 狀態 下拉式選單並選擇您想要設計的情況（例如，懸停、按下、聚焦等）
5. 導航 風格面板 > 版式 並選擇可變字體（如果先前尚未為所選元素設定字體，或者如果您希望在所選情況下更改完整的字體系列）
6. 按旁邊的文字框 變體 揭開字體變體選單
7. 透過滑動控制器或在每個修飾符旁邊手動輸入值來選擇您喜歡的字體變更（例如，粗細、寬度等）

提醒： 您將無法訪問 情況 如果沒有為所選元素指派類別或 HTML 標記，則為下拉式清單。

接下來，您可能想要為基本狀態和備用狀態之間的轉換設計動畫轉換。要製定動畫過渡：

1. 請依照上述步驟為備用狀態建立字型變體
2. 展開 風格面板 > 選擇器 場地
3. 點選 向下的箭頭 揭開 情況 下拉式選單並選擇“無”
4. 前往 風格面板 > 效果 並點擊“加” 旁邊的圖標 過渡
5. 合併您想要的任何過渡效果（例如，字體顏色、字體變更等）
6. 指定 期間 你的過渡效果
7. 點選“打開緩動編輯器” 圖標來個性化 寬鬆，如果需要的話

如何與字體變化產生交互

互動還支援可變字體，讓您可以使用字體變體制定不同的動畫。

提醒： 在製定動畫時要考慮可訪問性，並避免突然、突然或過度的動作。詳細了解如何運用刻意的動作和動畫。

若要與字體變體互動：

1. 發起 互動面板
2. 點擊 ”加” 圖示來附加 元素觸發 （例如，滑鼠懸停、捲動到視圖中等）或 頁面觸發 （例如，頁面載入、頁面捲動等）
3. 展開 行動 從開始操作部分的下拉清單（即，如果您選擇滑鼠懸停元素觸發器，您將展開 行動 從下拉式選單中 懸停時 部分）
4. 選擇下面的動畫 自訂動畫
5. 塑造您的客製化動畫並選擇 字體變化 在下面程式 部分> 看 向上 格式變化 部分
6. 導航至 字體變化 並選擇旁邊的框 變體 顯示字體變化設定
7. 透過移動控製或在每個變體旁邊輸入值來調整首選字體調整（例如，粗細度、寬度等）

常見問題與問題解決提示 

在哪裡可以找到適合我的設計的適應性字體？ 

您可以透過以下平台發現自適應字體 Google 字體, V字形， 和 豐泰斯克.

哪些字體檔案格式與自適應字體相容？ 

Webflow 適應 TTF、OTF、WOFF 和 WOFF2 格式的自適應字型。不支援 EOT 和 SVG 格式。 

自訂字體允許的最大尺寸是多少？ 

您可以上傳每個檔案最大檔案大小為 4MB 的字體。

在引入此功能之前，我之前上傳了靈活字體，並且無法附加變體。如何包含字體變體？ 

繼續 站點設定 > 字體 選項卡，刪除自適應字體，然後重新上傳自適應字體檔案。接下來，當您在設計器中造訪網站時，您應該能夠添加字體變體！ 

我透過 Google Fonts 或 Adobe Fonts 整合選擇了一種適應性字體，但無法存取字體變體。如何添加字體變化？ 

目前無法透過 Google Fonts 或 Adobe Fonts 整合存取字體變體。您可以從字體整合下載或取得字體，並將它們作為自訂字體上傳到 站點設定 > 字體 選項卡以利用字體變化。了解有關自訂字體的更多資訊。

在使用新的字體變化軸升級字體之前，我上傳了適應性字體。如何在新軸上添加字體變化？

您將需要重新上傳字體才能使用新的字體變化軸。前往 站點設定 > 字體 選項卡，刪除適配字體，然後重新上傳適配字型檔案。

為什麼某些軸標籤沒有如預期顯示？ 

設計器中顯示的字體變化軸的標籤取決於上傳的自適應字體檔案。如果自適應字體的類型設計器不包含人性化標籤，則 Webflow 預設為軸標籤。

字體變體是如何排序的？多種字體變體可以共用同一軸嗎？ 

字體變體可以在同一軸上進行多次修改，因為這種做法符合 CSS 規範。層次結構中最低的軸在應用的 CSS 中優先。例如，如果您設計了後續的字體變體： 

傾斜：0

重量：146

寬度：300

光學尺寸：18

重量：1000 

應用於字體的最終「重量」是 1000。 

「傾斜」軸與「斜體」軸有什麼不同？ 

儘管斜體和傾斜軸緊密相連，但傾斜軸管理字體檔案的傾斜或直立樣式的傾斜屬性，而斜體則呈現出與受草書影響的傾斜樣式不同的框架。 了解有關斜軸的更多信息.