内在版式是网络上造型文本的未来-css教程-PHP中文网

这些年来，我们的样式文字的变化并没有太大变化。有许多进步可以帮助使事情变得更加灵活，例如布局，但是就样式而言，我们的设计中的大多数有限方面（例如文本）仍然相对不变。文本样式尤其如此。我们为布局的每个部分都明确地编写代码，以明确样式的文本，然后为了使其响应迅速，我们编写更多代码以使其在每个断点处工作。这意味着，随着文本压缩和扩展的不同领域，结果是在内容中断之前的张力 - 明显的，经验的张力。在这些地方，内容遭受尺寸或间隔的尺寸不佳，同时受到过于复杂和脆弱的代码的支持。

固有的版式改变了所有这些，通过从代码本身开始以影响样式来清除它。您没有编写明确的文本样式，而是定义这些样式如何与文本区域成比例地变化。这使您可以在更多布局变化中使用更灵活的文本组件。它简化了您的代码，增加了新布局可能性的机会。固有的排版起作用，使文本对其呈现的区域进行自我调整。与其在每个断点上为每个组件的每个组件进行尺寸和间距的尺寸和间距，而是给出文本的说明，以响应其放置的区域。结果，内在版式使设计更加灵活，适应其放置区域，并且代码较少。

印刷超级能力超越钳位（）

使用固有版式的结果远远超出了Clamp（）等工具的可能性。固有的印刷样式将元素查询的组件可移植性与CSS动画的插值控制相结合，从而实现了跨容器宽度的任何值的无缝变化。该技术可以使其他CSS技术无法实现，例如随着元素的区域的变化，可以流畅地调整可变字体设置，颜色和无单位线路高点。您还可以避免夹具（）的可访问性陷阱，并锁定在使用相对单元时，将浏览器的默认字体大小更改的默认字体大小会从与断点的对齐中移出。

这与响应式排版有何不同？

响应式版式引用了转换文本的视口。它通过媒体查询，夹具（）或CSS锁来实现此操作。尽管这些技术能够跨屏幕尺寸对排版的颗粒状控制，但它们缺乏控制不同组件中的版式的能力。这意味着，对于具有一系列不同尺寸的内容区域的页面，需要使用响应式排版方法为每个区域创建新的标题样式。

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

内在风格的解剖结构

如果我们要采用上面的固有标题样式并挤出其中的所有变化，则看起来如下：

在页面的较大区域内，文本是排版更大，更大胆且更宽的。在页面的较小区域中，文本较小，更轻且较窄。测量了标题的渲染区域，然后从这种内在标题样式中获取适当的切片，用于该特定标题。

您可能会注意到有关这种挤出标题样式的形状的几件事。文本从较小到较大，但形状本身具有曲线。这种控制文本如何从一个点到另一点的缩放方式特别有用，因为屏幕变小，以确保最佳的知名度。在下面，您可以看到将相同的样式应用于两列文本，一组具有弯曲形状，另一组具有线性形状。与使用线性插值相比，在弯曲的固有示例中，文本在更多的地方更加清晰，其中文本变得太小了。

通过结合跨布局和区域区域的插值文本样式的能力，并塑造了这些设置的插值，内在版式使设计人员对在任何屏幕或组件大小上呈现文本的呈现方式都有前所未有的控制。

本质上的排版

TypeTura开发了一种工具，可以在CSS（我是创建者）中添加固有的排版功能。该工具可以编写必要的印刷样式，从而在以前没有的情况下注入灵活性。内在样式存储在CSS密钥帧中，并根据父元素的宽度进行更改。这可以使跨元素宽度的任何动画属性插值。要回到我们的元素查询示例，请考虑插值元素查询。

要设置密钥帧，0％等于容器宽度为0px，而KeyFrame 100％是样式覆盖的最大容器宽度。默认情况下，此值为1600px。可以通过将类TypeTura添加到元素中，将根元素作为默认容器添加到一个元素来定义容器。除非定义新的上下文，否则将根据父上下文的宽度来设计子元素。

 @KeyFrames标题{
  0％{
    字体大小：1REM;
  }
  100％{
    字体大小：4REM；
  }
}

登录后复制

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

 @KeyFrames标题{
  0％{
    字体大小：1REM;
    线高：1.1;
  }
  100％{
    字体大小：4REM；
    线高：1;
  }
}

.headline {
  -tt-key：标题；
}

登录后复制

要塑造这些样式如何扩展，请使用自定义属性-TT-曲。该属性接受CSS宽松功能和关键字。这使您能够迅速提高基本字体大小或标题缩放和间距的锥度。此外，我们可以用-tt-max限制这些样式覆盖的范围，以更好地符合布局的约束以及文本的使用方式。

 @KeyFrames标题{
  0％{
    字体大小：1REM;
    线高：1.1;
  }
  100％{
    字体大小：4REM；
    线高：1;
  }
}

.headline {
  -tt-key：标题；
  -TT-MAX：600；
   -  tt-sease：易于入门；
}

登录后复制

下面的示例显示，当所有文本上的所有文本都由固有的印刷样式驱动时，您的页面的灵活性如何；从文档的根部和向上。文本可以从为会议室服务的监视器无缝过渡到手表的大小 - 所有这些都没有媒体查询。文本样式也可以在不同的模块中共享；例如，页面顶部的标题和临时区域的标题都由相同的样式驱动。虽然效率立即出现在任何网站上，但它们很快就会复杂化：您拥有的较大网站，这些效率越多。

查看这支笔。在其中，我添加了一个固有的样式检查器，因此您可以单击每个标题，看看渲染尺寸是多少。在检查员中，您还可以操纵内在样式的形状和上边界。这使您可以开始看到TypeTura启用的印刷样式可能性。

内在版式是网络上样式的未来

将这些设计规则烘烤到您的内容中是内在设计的实践，将这些规则烘烤到文本中是内在版式的实践。詹·西蒙斯（Jen Simmons）创造的固有网络设计是一个概念，其中常见的设计突变被烘烤到我们组件的结构中。与其明确说明每个内容的样式，而是给出了内在布局的设计约束，我们的内容对其环境做出了响应，而不是明确定义样式。这种方法既简化了您的代码库，又可以增强设计的灵活性，因为组件的说明不仅可以帮助他们响应视口。

Typetura将这种理念带入文本样式。由于文本组件是我们最基本的设计材料，这种材料几乎在每个组件中都被重复使用，因此内在版式比其他方法具有显着的优势。设计弹性，可扩展性和代码简化的优势在您的项目中更深入并延长其寿命。缩小到手表的大小或电视的大小，而文字曾经限制了您的布局可以到达多远，现在它支持您的野心。

以上是内在版式是网络上造型文本的未来的详细内容。更多信息请关注PHP中文网其他相关文章！