typography

CSS的leading-trim给排版带来的变化

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

给CSS加把锁

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

实现精准的流体排版原理

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

使用Sass Map实现响应式排版

本来要管理Rhythm排版一致不是一件易事,响应式中的Rhythm排版就更加困难。幸运的是,Sass的Map可以更好的管理和实现响应式排版。有各种各样的方法来处理响应式排版和Vertical Rhythm,并不局限于我的建议。然而,这是我很多次工作中总结出来的经验之谈。

Web排版的缩放

RWD不是在新的话题。而在Web设计中,页面的排版又是设计元素中重要的部分之一。而我们平时对于Web页面更为关注的是如何布局?如何实现实现设计图效果?一旦你实现了设计的转换,并不关注其排版风格。但在RWD中,排版风格的一致化给用户带来的体验并不是很好,那么在RWD中如何让用户阅读具有一个更好的体验,我们就必须考虑在不同设备之下其排版风格的变化。那么今天在本文中我们将要讨论的是如何在响应式设计中实现不同的排版本风格,我想这个话题也是众多Web前端人员想讨论的,如查您感兴趣,欢迎进入一起讨论。

返回顶部