向WordPress添加流體版式支持-css教學-PHP中文網

和

>示例1：設置新的流體字體設置

>示例2：排除流體類型的字體設置

用流體版式支持

首頁

web前端

css教學

向WordPress添加流體版式支持

Jennifer Aniston

Mar 10, 2025 am 10:59 AM

Adding Fluid Typography Support to WordPress Block Themes

流體版式根據視口尺寸動態調整字體屬性（尺寸，線高），並提高響應能力。它也稱為響應式排版，靈活的類型或視口大型版式，它提供了卓越的用戶體驗。本文著重於在WordPress 6.1中實現流體版式，利用其內置塊編輯器功能。

>簡單地將一個

函數添加到

>創建流體文本時，True Block Editor Integration需要一種不同的方法。 clamp() style.cssgutenberg的液體版式支持

>許多WordPress主題開發人員在他們的主題中使用了，其中包括二十二十二和二十三十三個主題。但是，Gutenberg（WordPress的Block Editor）在版本13.8中引入了流體版式支持，從而為塊編輯器內的直接應用程序提供了主題級實現。此功能成為6.1版WordPress核心的一部分。

Rich Tabor，一個關鍵的貢獻者，突出了該功能的力量和簡單性。該方法著重於塊級支持，默認情況下動態應用流體字體大小。好處包括：

clamp()

簡化的主題作者實現。

可維護的，可重複使用的應用於特定元素/塊。

字體尺寸單元的靈活性（PX，REM，EM，％）。
WordPress 6.1允許主題作者在沒有自定義代碼的情況下實現一致的流體版式。
Gutenberg 14.1（2022年9月16日）在眾多塊中添加了印刷設置，直接在塊編輯器中提供字體和間距控件。該擴展的功能已集成到WordPress 6.1。

通過

流體版式通過

，一個塊主題配置文件實現。考慮使用

和

的大字體。 CSS中的A

函數可能是：

WordPress 6.1支持REM，EM和PX單元。但是，新的流體類型功能提供了一種更簡單的方法。啟用流體版式：

theme.json然後用contentSize: 768px指定widesize: 1600pxclamp()，為min和max值：

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

登入後複製

這將流體類型添加到“大”字體尺寸（2.25REM至3REM）中。然後可以將“大”字體應用於具有字體設置的任何塊。 >

WordPress將

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

登入後複製

屬性轉換為CSS：

> fontSizes fluidSize應用於

標籤之類的元素。在線計算器可以協助確定

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

登入後複製

>值。

>示例

相關的github拉請求中可用theme.json詳細的測試說明。

>示例1：設置新的流體字體設置

確保使用Gutenberg（13.8）或WordPress 6.1。啟用流體類型theme.json：

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

登入後複製

添加字體大小設置：

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

登入後複製

在塊編輯器中應用“正常”，並驗證前端標記和CSS。

>示例2：排除流體類型的字體設置

>像以前一樣啟用流體類型。定義字體尺寸，將流體類型禁用一個：

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

登入後複製

WordPress相應地生成CSS，不包括流體類型調整中的“超大”設置。驗證前端標記和CSS。