使用行高单位来润饰你的排版

主要观点:几十年来在网页上创建华丽排版已成为可能,但完善细节需大量精力,CSS 近几年出现的新工具如lh单位使抛光图形设计细节变得容易。
关键信息:

  • lh单位:等于当前字体在当前行高下一行文本的高度,1rlh单位是根元素的行高,用p { margin-block: 1lh; }可设置段落边距,能使排版更精致,对比1em边距更明显。
  • 浏览器支持:超过 94%的浏览器支持lh单位,对不支持的浏览器可使用渐进增强,如article { padding: 1em; padding: 1lh; }
  • 可尝试:在此演示中尝试使用lh设置段落边距的效果。
    重要细节:通过在文本下画线条网格可更清晰看出lh单位设置边距的效果差异,如今是网页排版的好时机,有十多个小功能可帮助提升排版细节。可在BlueskyMastodon上分享想法。
阅读 13
0 条评论