伏龙阁资源网

垂直栅格和渐进式行距应用举例
站长资源 2024/11/22 佚名
2 0

新问题

来也匆匆，去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布，已经不知不觉过去了两个多月了。反过来，看看上次的成果。诶？怎么感觉边注有点奇怪呢？

垂直栅格和渐进式行距应用举例
(demo-6.html)

还是参考我的这篇 关于排版的文章 ：我们知道

  • 中文互联网上最常用的行距是1.5左右
  • 行长越长,需要的越大的行距. (行距太小,读者阅读换行时容易串行. 行距太大,读者阅读行时会感觉到文字不连续.)

看来，对于边注的12px字体大小的，24px的行高显然过大了。但是，根据上一篇文章的方法，垂直韵律需要边注的行距和正文的行距应当一致。那么为了保持 垂直韵律，我们只能同时减少左右两边的行距——总结：不靠谱。那么，我们该如何调整边注行距，却又能够让我们建立的垂直韵律生效呢？这就需要我们引入渐进式行距。

渐进式行距

总得说来，渐进式行距是对死板的垂直韵律的一个补充。垂直韵律是要求边注和正文的每一行都对 齐。相比之下，渐进式行距让边注和正文也对齐——但不是每一行——而是每几行对齐一次。一般是每4行或者每5行对齐一次。我们回顾一下上一篇文章，知道， 本文开始的那张例子，“配置”如下：

  • 正文：字体大小14px，行距24px，段后距24px
  • h1：字体大小24px，行距24px，段前距24px，段后距24px
  • h2：字体大小：18px，行距24px，段前距12px，段后距12px
  • 边注正文：字体大小12px，行距24px，段后距24px
  • 边注边框：边框粗1px，内补白11px——别忘了还要把它上移12px

我们修改边注的行距和段后距都为18px。那么情况就会像这样：

垂直栅格和渐进式行距应用举例
(demo-9.html)

不知道各位看官发现了没有，为什么第一行基线没对齐呢？这是因为流布局会将文字块按照行高做顶端对齐。如下图：

垂直栅格和渐进式行距应用举例

所以，在这里，为了使首行基线对齐，我们还要将边注下降一定的像素。可恨的是，需要下降的像素是多少——这个很复杂的问题，至少经过不才好几次的尝试都没有看出个规律来，而只得出以下三个结论：

  • 设正文行高是h px，边注行高是h’ px，需要下降的值为d px，那么，这个值将介于 1/2(h-h’) < d < (h-h’) . ①
  • 如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
  • 不同的字体渲染引擎可能行为不一致。
上一页12 3 下一页 阅读全文
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接