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

站长资源 2024/4/28 佚名

2 0 1

新问题

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

(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’) . ①
如果该行引入了西文字符(半角数字或者字母)，该行的基线有时会比没有西文字符偏移一个像素。
不同的字体渲染引擎可能行为不一致。

垂直栅格,渐进式行距

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“垂直栅格和渐进式行距应用举例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年04月28日

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

HTML中的input type="reset"标签失效(不起作用)的可能原因。

网站维护页面的列表制作技巧

评论“垂直栅格和渐进式行距应用举例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接