内在排版是网页文本样式的未来

多年来，我们设置文本样式的方式并没有太大变化。 为了使布局更加灵活，已经取得了许多进展，但在样式设置方面，我们设计的大多数有限方面，如文本，仍然保持相对不变。 这对于文本样式设置尤其如此。 我们编写代码来明确地为布局的每个部分设置文本样式，然后为了使其具有响应性，我们编写更多代码以使其在每个断点处正常工作。 这意味着，随着文本的不同区域压缩和扩展，结果是紧张 - 明显的，体验性的紧张 - 就在内容断裂之前。 在这些地方，内容由于尺寸或间距不好而受到影响，同时受到过于复杂和脆弱的代码的支持。

内在排版 改变了这一切，从代码本身开始，清除所有这些问题以影响样式。 您无需编写显式文本样式，而是定义这些样式如何相对于文本区域的变化。 这使您能够在更多布局变化中使用更灵活的文本组件。 它简化了您的代码，增加了新的布局可能性。 内在排版使文本能够自适应地调整到渲染它的区域。 文本不是为每个断点处的每个组件设置大小和间距，而是被赋予了响应其放置区域的指令。 结果，内在排版使设计能够更加灵活，适应其放置的区域，并且代码量更少。

超越 clamp() 的排版超能力

使用内在排版的成果远远超出了 clamp() 等工具所能实现的效果。 内在排版样式将元素查询的组件可移植性与 CSS 动画的插值控制相结合，从而实现任何值跨容器宽度无缝变化。 这种技术可以实现其他 CSS 技术无法实现的功能，例如，随着元素区域的变化，可以流畅地调整可变字体设置、颜色和无单位的 line-height。 您还可以避免 clamp() 的可访问性陷阱和锁，当使用相对单位时，更改浏览器的默认字体大小 会使您的排版与您的断点脱节。

这与响应式排版有什么区别？

响应式排版引用视窗来转换文本。 它通过媒体查询、clamp() 或 CSS 锁定 来实现。 虽然这些技术使您能够跨屏幕尺寸细致地控制排版，但它们缺乏控制不同组件中排版的能力。 这意味着，对于具有多个不同尺寸内容区域的页面，需要为每个区域创建一个新的标题样式，并采用响应式排版方法。

内在排版不需要所有这些。 使用内在排版，可以在所有不同的内容区域中使用单个标题样式。 可以将离散标题样式合并到一个内在标题中。 这类似于元素查询与媒体查询的区别：使用元素查询，可以将所有缩放信息绑定到组件，而媒体查询样式始终引用视窗。

内在样式的解剖结构

如果我们要提取上面内在标题样式中的所有变化，它将看起来像下面这样

在页面较大的区域中，文本被设置为更大、更粗体、更宽。 在页面较小的区域中，文本更小、更轻、更窄。 测量渲染标题的区域，然后从此内在标题样式中获取适当的切片，用于该特定标题。

您可能会注意到此推断标题样式形状的几个特点。 文本从较小变为较大，但形状本身具有曲线。 这种对文本从一个点到另一个点如何缩放的控制特别有用，因为屏幕会变小以确保最佳的可读性。 在下面，您可以看到相同的样式集应用于两列文本，一列具有曲线形状，另一列具有线性形状。 在曲线内在示例中，文本在更多地方的可读性明显更高，与使用线性插值的示例相比，在使用线性插值的示例中，文本变得太快太小了。

通过结合在布局的大小和区域之间插值文本样式以及塑造这些设置如何插值的能力，内在排版为设计人员提供了前所未有的控制权，以控制文本在任何屏幕或组件尺寸下的渲染方式。

内在地排版

Typetura 开发了一个 工具，将内在排版功能添加到 CSS 中（我是创建者）。 此工具使您可以编写必要的排版样式，在以前没有灵活性的地方注入灵活性。 内在样式存储在 CSS keyframes 中，并根据父元素的宽度进行更改。 这使您可以跨元素宽度插值任何 可动画属性。 为了引用我们的元素查询示例，可以想象插值的元素查询。

要设置您的 keyframes，0% 等于容器宽度为 0px，而 keyframe 100% 是样式将覆盖的容器最大宽度。 默认情况下，此值为 1600px。 通过将类 typetura 添加到元素来定义容器，根元素作为默认容器。 子元素将根据父上下文宽度进行样式设置，除非定义了新上下文。

@keyframes headline {
  0% {
    font-size: 1rem;
  }
  100% {
    font-size: 4rem;
  }
}

要将这些样式附加到您的元素，请使用自定义属性 --tt-key。 现在您可以看到您的第一个内在样式。

@keyframes headline {
  0% {
    font-size: 1rem;
    line-height: 1.1;
  }
  100% {
    font-size: 4rem;
    line-height: 1;
  }
}

.headline {
  --tt-key: headline;
}

要塑造这些样式的缩放方式，请使用自定义属性 --tt-ease。 此属性接受 CSS 缓动 函数和关键字。 这使您可以快速提高基本字体大小或逐渐减少标题缩放和间距。 此外，我们可以使用 --tt-max 来约束这些样式覆盖的范围，以更好地适应布局的约束以及文本的使用目的。

@keyframes headline {
  0% {
    font-size: 1rem;
    line-height: 1.1;
  }
  100% {
    font-size: 4rem;
    line-height: 1;
  }
}

.headline {
  --tt-key: headline;
  --tt-max: 600;
  --tt-ease: ease-in-out;
}

以下示例展示了当页面上的所有文本都由内在排版样式驱动时，页面可以多么灵活；从文档的根部向上。 文本可以从服务会议室的显示器无缝过渡到手表的大小 - 所有这些都不需要媒体查询。 文本样式也可以在不同的模块中共享；例如，页面顶部的标题和下一单击区域中的标题都由相同的样式驱动。 虽然效率在任何网站尺寸下都会立即显现，但它们会迅速累积：网站越大，这些效率累积得越快。

查看此 Pen。 在里面，我添加了一个内在样式检查器，这样您就可以点击每个标题并查看渲染的大小。 在检查器中，您还可以操作内在样式的形状和上边界。 这使您可以开始了解 Typetura 启用的排版样式可能性。

内在排版是网页样式的未来

将这些设计规则融入你的内容中就是内在设计，而将这些规则融入你的文本中就是内在排版。 内在网页设计 是由 Jen Simmons 提出的一个概念，指的是将常见的网页设计变体融入到网页组件的本质。 与显式声明每个单独内容片段的样式不同，内在布局被赋予了设计约束，并且我们的内容会根据其环境做出反应，而不是显式定义样式。 这种方法既简化了你的代码库，又增强了设计的灵活度，因为组件拥有指令，可以帮助它们对不止视窗做出反应。

Typetura 将这种理念引入文本样式。 由于文本组件是我们最基础的设计素材，这种素材几乎在每个组件中都会被重复使用，因此内在排版比其他方法有明显优势。 设计弹性、可扩展性和代码简化等优势存在于你的项目更深层次，并延长了其寿命。 缩小到手表大小或扩大到电视大小，文本曾经限制了你的布局能达到的范围，而现在它支持你的雄心壮志。