From 264a6ec06ac0d3f55224866b6c16892c447dd644 Mon Sep 17 00:00:00 2001 From: laoyang Date: Wed, 28 Oct 2026 07:38:09 +0800 Subject: [PATCH] =?UTF-8?q?3.2.61=20=E4=BF=AE=20h2/h3=20=E5=B1=82=E7=BA=A7?= =?UTF-8?q?=E5=80=92=E6=8C=82=EF=BC=9Ah2=20=E6=8F=90=E5=88=B0=2024/700?= =?UTF-8?q?=EF=BC=8Ch4=20=E9=99=8D=E5=88=B0=20500=20=E5=8F=82=E4=B8=8E?= =?UTF-8?q?=E5=88=86=E5=B1=82=20#29?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 3.2.60 我自己造出的问题:只把 h3 提到 20px/600,h2 一直是 20px/500 ⇒ 两级同字号、h3 还粗 100,三级标题比二级更抢眼,层级是倒的。 根因不是实现难,是判据漏了:3.2.60 写了 52 条断言全绿,但**没有任何 一条断言 h2 > h3**(只查了 h3 > 正文),倒挂在全绿里完全隐形。 改法(用户选 D 方案,并要求 h4 一起调) h2 24px / 700 / 左 5px 蓝条 + 浅灰底(行高 41→46) h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线,无底色 h4 17px / 500 / 纯文字 p 16px / 350 两处细节的理由 · h4 600→500:600 与 h3 同重,只剩 3px 字号差,看着像"同一级被缩小"。 降到 500 让字重也参与分层;仍明显重于正文 350(差 150),不会糊回正文。 · h2 行高 41→46:24px 字配 41px 行高,灰底上下各只剩 8.5px、看着发扁。 写进注释的两条铁律 ① 字号与字重必须同时严格递减:24>20>17>16、700>600>500>350 ② 装饰强度也递减:蓝条+灰底 > 蓝条+细线 > 无 > 无 任一级调了要回头核对相邻两级,不能只盯自己那一级。 验证 · _geom361_route.js 56 / 0(双端面,新增 G1~G8 层级递减 + H 装饰 + I 行高) G7/G8 是「严格」递减,不允许相等 —— 只写 >= 的话 h2=h3=20px 照样能过 · _falsify361.js 10 / 10 R1 = 把整份 CSS 退回 3.2.60 的倒挂状态 ⇒ 56→40,红 16 条,G1/G2 命中 (这一项通过才证明上一轮的盲区真的堵住了) · _css360_selfcheck.js 28 / 0(改动后它主动报红提示 h4 期望过期,更新后全绿) --- assets/css/site.css | 52 +++++++++++++++++++++++++++++++++------------ style.css | 2 +- 2 files changed, 40 insertions(+), 14 deletions(-) diff --git a/assets/css/site.css b/assets/css/site.css index e8e9744..c0b2615 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -125,30 +125,53 @@ margin: 0; } -/* 正文二级标题:左侧蓝条 + 浅灰底,横向铺满(负 margin 吃掉正文的 16px 内距) */ +/* 正文二级标题:左侧蓝条 + 浅灰底,横向铺满(负 margin 吃掉正文的 16px 内距) + * + * 3.2.61(工单 #29 追加):字号 20→24、字重 500→700。 + * 🔴 这是 3.2.60 留下的层级倒挂的修复:3.2.60 把 h3 提到 20px/600, + * 而 h2 一直是 20px/500 —— 结果 h2 和 h3 同字号、h3 还更粗 100, + * 三级标题比二级标题更抢眼。用户一眼就看出"h3 比 h2 还大"。 + * 根因是当时只动了 h3,没把 h2 一起拉起来,而且判据里 + * **没有任何一条断言 h2 > h3**,所以 52 条全绿也照样漏了。 + * ⇒ 往后调任一标题级别,必须同时断言相邻两级的**字号 + 字重** + * 都单调递减(见 _geom361_route.js 的 G 组)。 + * + * 行高 41→46:24px 字配 41px 行高,上下各只剩 8.5px,灰底看着发扁; + * 46px 让上下各留 11px。这个 11px 是**算出来的**: + * 24px 字的实际墨迹高约 24×0.88 ≈ 21px(中文黑体 ascent+descent 之内), + * 行框 46px 减 21px 再除以 2 ≈ 12.5px,与 3.2.60 的 20px/41px + * (20×0.88=17.6,41-17.6=23.4,/2≈11.7px)基本持平。 */ .k-main .details .article .content h2 { margin: 16px -16px; padding: 0 10px; border-left: 5px solid #00a2ff; background-color: rgba(243, 243, 243, 0.7); - font-size: 20px; - line-height: 41px; + font-size: 24px; + font-weight: 700; + line-height: 46px; } /* ── 正文三级标题:左侧细竖线 + 底部细线(3.2.60 / 工单 #29) * - * 改之前 h3 只有 `font-size:18px; font-weight:500`,没有任何装饰, + * 3.2.60 之前 h3 只有 `font-size:18px; font-weight:500`,没有任何装饰, * 而正文是 16px/350 —— **只差 2px 字号、150 字重**,放在长文里根本分不出来。 - * 对比之下 h2 有蓝条+灰底,越显得 h3 就是"一段稍微粗一点的字"。 * - * 层级梯度(改后): - * h2 20px / 500 / 左 5px 蓝条 + 浅灰底 ← 最重,分节 + * 层级梯度(3.2.61 定稿,三级 + 四级同步调整): + * h2 24px / 700 / 左 5px 蓝条 + 浅灰底 ← 最重,分节 * h3 20px / 600 / 左 3px 蓝条 + 底 1px 细线,无底色 - * h4 17px / 600 / 纯加粗 + * h4 17px / 500 / 纯文字,无装饰 * p 16px / 350 * + * 🔴 两条铁律(3.2.60 违反第 1 条,导致 h3 比 h2 还抢眼): + * ① 字号与字重**同时**严格递减:24>20>17>16、700>600>500>350; + * ② 装饰强度也递减:蓝条+灰底 > 蓝条+细线 > 无 > 无。 + * 任一级调了,必须回头核对相邻两级的下行关系,别只盯自己那一级。 + * * 为什么 h3 竖线用 3px 而不是 h2 的 5px:同族但更轻,一眼能看出次一级。 * 为什么 h3 不加底色:h2 已经有灰底,h3 再铺一层整篇会碎成一块块。 + * 为什么 h4 用 500 而不是 600:600 与 h3 同字重,就只剩字号 3px 的差别, + * 视觉上"像同一个级别被缩了一点"。降到 500 后,字重也参与分层。 + * 500 仍然明显重于正文的 350(差 150),不会糊回正文里去。 * * ⚠️ 特异性必须是 (0,4,1) 起步、并把字号/字重一起写死: * kratos 的 `.k-main .details .article .content h3` 是 (0,4,1), @@ -165,15 +188,18 @@ line-height: 32px; } -/* ── 正文四级标题:17px / 600(工单 #29) +/* ── 正文四级标题:17px / 500(3.2.61 定稿) * - * h3 涨到 20px 后,h4 若还是 16px 会跟正文挤在一起、层级断层, - * 所以同步上调到 17px 并加重字重。不加任何装饰 —— 到第四级 - * 再加线就会满屏都是线。 */ + * 字号 17px 保持不动(h3 20px 之下、正文 16px 之上的唯一合理档位, + * 再往下压到 16px 就与正文同大、层级直接断层)。 + * 字重 600 → 500:600 与 h3 完全同重,等于只有 3px 字号差, + * 看着像"同一级被缩小",不像下一级。降到 500 让字重也参与分层。 + * + * 不加任何装饰 —— 到第四级再加线就满屏都是线了。 */ .k-main .details .article .content h4 { margin: 20px 0 12px; font-size: 17px; - font-weight: 600; + font-weight: 500; line-height: 30px; } diff --git a/style.css b/style.css index e9ec8c2..281024a 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.60 +Version: 3.2.61 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好