向WordPress添加流体版式支持-css教程-PHP中文网

向WordPress添加流体版式支持

Jennifer Aniston

发布： 2025-03-10 10:59:08

原创

534 人浏览过

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。