使用Divi 5管理字體和字體尺寸

字體和版式為您的網站定下了基調。正確地將其幫助可以幫助您的品牌並提高可讀性。 Divi 5使使用字體快速輕鬆地工作。借助Divi的新功能，例如設計變量和選項組預設，設置字體變得容易。

這篇文章會教您如何管理Divi 5中的字體和字體大小，從而創建響應式排版，從而在跨設備上縮放出精美的縮放。

Divi 5已準備好用於新的網站構建，但我們正在對向後兼容系統進行完成。同時，請堅持更新在D4上構建的網站。當改變發生時，我們會告訴您。

考慮新網站的字體思考時的考慮

啟動新站點時，字體選擇會影響用戶的第一印象。考慮以下要點以確保您的版式支持您的內容：

• 可讀性：選擇清晰的字體，尤其是針對身體文本。
• 一致性：限制您的字體 - 兩個或三個功能最佳，至少一個用於標題，一個用於身體文本。
• 響應性：確保字體適應不同的屏幕尺寸（理想情況下，從320px到1440px）。
• 兼容性：選擇網絡安全或流行字體以避免顯示問題。

如何管理Divi 5中的字體和字體尺寸

讓我們使用Divi庫中的預製佈局。我們將從“ Business CV”包中選擇著陸頁佈局，並使用Divi 5的新功能對版式進行修改。如果您有現有的Divi 5網站，但想改進其版式，則可以在不使用此佈局的情況下遵循以下步驟。

步驟1：選擇字體配對

好的字體配對融合樣式和可讀性。 Google字體也是一個安全的選擇，因為它們內置在Divi中並且易於使用。

在下面的示例中，我們將堅持佈局包在標題和身體文本中使用Poppins。您也可以嘗試配對Lora和Roboto。

步驟2：設置主標頭和身體字體

現在您已經選擇了字體，我們可以使用Divi將它們添加到網站上。在視覺編輯器中，在左上方打開變量管理器。 Divi的設計變量可讓您在網站上全球控製字體。

主題和車身字體有兩個默認字體變量。轉到字體部分，並將“ Poppins ”設置為標題字體，並將“ Roboto ”作為身體字體。

將您的字體設置為與您的設計和品牌要求的任何匹配

在這一點上，確保您的品牌顏色也設置為設計變量可能也是一個好主意，尤其是如果您打算在文本中使用其中的某些顏色。

輸入後，請確保保存變量

步驟3：創建字體尺寸

現在有更多參與的部分。最好考慮如何在每個設備尺寸上使您的版式看起來都很好。使用Divi 5，您有兩個選擇。第一個也是首選的選項是使用clamp（），第二個是在各種斷點上多次設置字體。

您如何在每個標題級別，身體文本和其他文本情況下構建字體尺寸完全取決於您。

用夾具的流體打字（）

clamp（）可讓您設置最小值，首選值和最大值。在另一篇文章中，我們深入介紹了夾具（），並提供了一種簡便的方法來找出這些值。但這是一個例子：

該佈局在第一部分中具有默認的H1大小和該人名稱的唯一（更大）的H1大小。我們在上述尺寸圖表中延續了相同的原理，並添加了較小的身體字體變化。

您可以在簡單的HTML文檔中測試字體尺寸，以孤立地查看事物（這也可以在Divi內部完成）。這是上述字體尺寸與字體配對的樣子。

一旦您對字體尺寸感到滿意，就可以將它們添加為設計變量。給每個人一個可辨別的名稱，並在右邊粘貼值。

固定有斷點的單位

clamp（）是字體尺寸最通用的選項，但是許多用戶仍然使用固定值（例如像素或REM）。您可以將它們與Divi的可自定義斷點一起使用，以根據需要上下縮放字體。

由於使用這種方式時的相似效果的值數量（而不是上面的10個夾具（）值，這將是30個單獨的值）。不一定建議用這些值填充變量管理器，但是如果您願意，可以，

您可以為每個斷點構建尺寸結構，並將其運送到下一步。您可以將它們直接應用於選項組和元素預設，而不是將它們放置為設計變量。

步驟5：將變量管理器的字體大小添加到預設

將您的數字變量設置（或至少配製），是時候將它們應用於預設了。選項組預設的最佳用例之一是排版。您可以創建七（7）個標題/標題選項組預設，您可以用於使用標題/標題字段的任何模塊（例如，標題，Blurb，手風琴和人員模塊）。

文本選項組也是如此。我可以設置兩個（2）個預設（一個用於我的正常情況，一個用於我的小正文），任何使用文本選項組的模塊都可以使用這些樣式。對於標題和文字樣式，這要比將這些樣式作為元素預設應用於整個網站可能使用的所有模塊要高得多。

將固定值分配給斷點

下面的視頻顯示了基本步驟，如果您在多個斷點處選擇了固定值。單擊文本模塊，轉到“設計”選項卡，懸停在文本選項組上，單擊OG圖標，創建新的預設，然後在每個斷點處應用您的樣式。滾動到右側欄的底部並保存預設（非常重要）。重複您想到的文本變化（例如小，常規和大的選擇）。

分配您期望最多使用該選項組的OG預設作為默認預設。如果您在旁邊看到一顆星星，那就是您當前的默認值（假設整個模塊樣式或元素預設都沒有應用）。

分配clamp（）函數（更容易）

當將設計變量與clamp（）函數一起使用時，該過程相似，但要容易得多。在下面的示例視頻中，我們將兩個標題尺寸設置在選項組級別上。與上述內容的唯一區別在於，我們不是在粘貼值，而是使用之前設置的變量。在設置OG預設時，請確保選擇默認字體並根據需要設置顏色。有些人喜歡將顏色設置為模塊級別，但取決於您。

您將將每個H1-H6標題級別設置為一個新的自定義選項組預設。

使用您創建的選項組預設將這些預設應用於佈局標題。選項組預設的優點在於，它們跨該選項組中的模塊（例如文本，盤問和標頭模塊）工作。

Divi 5中字體的最佳實踐

為了最大程度地發揮印刷作品，請記住這些技巧：

• 始終儘早設置全局字體變量。
• 使用一致的間距和尺寸（是的，您也可以將字母間距和行高度設置為設計變量）。
• 定期跨屏幕尺寸預覽響應視圖。
• 避免過多的字體或字體重量。

Divi 5中的版式是新鮮空氣的呼吸

由於Divi的最新功能，您現在擁有完整的排版系統。

字體以設計變量的形式使用。使用夾具（）時的字體尺寸相同。或者，如果您想鍛煉所有這些可自定義的斷點，也可以採取該路線。

期權組預設在整個網站上毫不費力地應用這些選擇。在整個構建中調整字體尺寸非常容易，因為它們被設置為設計變量。無論如何，您的設計都會保持敏銳，並且您的構建時間都會縮小。

Divi 5推出了許多新功能，可以升級您的設計系統。立即開始在Divi 5中建立新站點，以利用所有最新功能。我們建議等待更長的時間將現有網站遷移到Divi 5。