响应式排版是一个棘手的问题。我学习了很多的有关排版的问题，而且收集了一些非常棒的例子，比如使用相对单位，vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的，它们让我的网站更加美观，更加赏心悦目。但是，实现这些功能的过程却是非常糟糕的。在几个月的辛苦工作之后，现在我终于找到了一个可以和各位分享的一个解决方法——Typi。

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter在另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区，如何让文本显示的各为大气，又适合你的Web排版。

流体排版这一词似乎看上去有点陌生，在英文中常把他称之为Fluid Typography，当然也有很多朋友称之为流体字号（Fluid Size）。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

大约一年前，我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo，它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss，并一起聊了一些关于响应式图片社区小组，因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候，看到的结果让我感到无语。为了宣泄一下，我将一步一步写下各种浏览器的渲染结果，以及目前可能的解决方案。这篇文章的篇幅很长，可能会花费你一定的时间。

看到该标题，我想你可能会感到非常的意外和好奇，“CSS怎么能加把锁呢”？其实这里所说的给CSS加把锁是指业内所说的CSS Locks（或者CSS calc Lock）。该概念是@Tim Brown在2012年提出的一个概念，该技术其主要致力于解决文本排版可读性相关的技术难度，特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过，@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力于这方面的研究，而且找到了使用CSS锁技术方案来锁定流式排版。让我们实现一个精准的流式排版不再是难题。在今天这篇文章，我们来一起探讨一下CSS锁的故事。

今天要和大家聊的leading-trim既是一个简单的属性，但又是一个复杂的体系。为什么这么说呢？如果我们从CSS属性的角度出发，那他是一个简单的属性，我们只需要知道他有哪几个值，每个值的作用是什么，这样就有实现需要的效果。如果我们从排版的角度出发，那他又是一个复杂的体系，因为要彻底的掌握他们，我们需要掌握的东西太多，有设计方面的，有文字排版方面的，也有CSS的其他属性等。但是，leading-trim的确能帮助我们Web开发者解决一些排版上的烦恼，特别是行与行间距方面的烦恼。如果你对这方面感兴趣的话，欢迎继续往下阅读。