style: 标题编号字号改成与各级标题一致(3.2.63)#30

用户反馈 0.62em 那版太小、"很不协调,看着难受",要求字号和每一级标题一样。

改动:
- .yang-h-num 的 font-size 从 0.62em 改成 1em:
  h2 编号 24px、h3 20px、h4 17px,逐级与标题同大。
  弱化只靠颜色(#a8abb2)和字重(400),不再靠缩字号。
- margin-right 从 0.35em 收到 0.25em:em 是相对编号自身字号的,
  字号从 14.88 变 24 后同一个 0.35em 会从 5.2px 涨到 8.4px,间距偏宽。
- display:inline-block + line-height:1 保留:实测同字号后已不撑高,
  但留着防回归(以后改回小号不会复发 3px),且编号成原子盒不跨行断开。
- site.css 与 readme 的相关注释同步重写,删掉过期的「落在 12~15px 区间」。

验证(全部在线上真实文章页上量实际渲染值):
- 几何 71/0:h2 24/24、h3 20/20、h4 17/17,逐级与标题相等;
  标题高度加/不加编号差 0.00px;编号与文字不重叠、不跨行。
- 三条反证全部红在预期条目:小字号+inline+inherit(3.00px)、
  display:block(24.00px)、字号回 0.62em(G8)。
- 编号判据 44/0、真实数据 20/0、目录等价 7/0、反证 22/0。
- 打包自检 61/0,注入反证 8/0(含新增的字号/margin 两组)。
- PHP 语法 97 个文件 0 错。

包:kratos_yang-3.2.63.zip  md5 ce757f325c0928f44d0e053d834c7da7
已发到 /theme-update/,update.json 已切 3.2.63,后台可见更新。
This commit is contained in:
2026-10-28 08:59:31 +08:00
parent 76c69b31e8
commit 0c8cee9094
2 changed files with 36 additions and 17 deletions
+35 -16
View File
@@ -227,28 +227,38 @@
* 编号是**独立 span**,不是改标题文本 —— 所以不进编辑器、不进 RSS、
* 不进搜索结果、不进摘要。作者手写编号时压根不插这个 span。
*
* ── 为什么用灰色小号(用户选定的方案)──────────────────────────
* ── 为什么用灰色(用户选定的方案)──────────────────────────────
* 标题的核心是**文字本身**,编号只是索引辅助。若与标题同色同粗,
* 视觉上"1.1"会和标题正文抢注意力,长文章里满屏都是粗体数字。
* 灰色 + 小一号让编号退到背景,眼睛扫标题时能忽略它、需要定位时
* 又能看见 —— 这也与目录里 `.yang-toc-num` 的处理一致(同为灰色小字),
* 视觉上"1.1"会和标题正文抢注意力,长文章里满屏都是数字。
* 灰色 + 字重 400 让编号退到背景,眼睛扫标题时能忽略它、需要定位时
* 又能看见 —— 这也与目录里 `.yang-toc-num` 的处理一致,
* 正文和目录的编号看起来是同一套东西。
*
* ── 字号为什么要跟标题走而不是写死 ─────────────────────────────
* 编号要跟着标题一起缩放才有"附属于标题"的感觉。这里用 em:
* 0.62em 在 h2(24px)上是 14.9px、h3(20px)上 12.4px,
* 正好落在 12~15px 这个"能看清但不抢眼"的区间。
* ⚠️ 若写成固定 px,h2 的编号会显得太小、h3 的又偏大。
* ── 字号是 1em(与标题完全同大,3.2.63 起)────────────────────
* 🔴 0.62em 那一版**用户否掉了**:「字体不能太小,要不然很不协调,看着难受」。
* 实测 0.62em 在 h2 上是 14.88px、而标题 24px —— 差 9px,比例失衡,
* 编号像"贴在标题边上的小注脚",不像标题的一部分。
* 改成 1em 之后:h2 编号 24px、h3 20px、h4 17px,与标题逐级同大。
* 弱化只靠**颜色 + 字重**(灰 #a8abb2 / 400),不靠缩字号。
*
* ⚠️ 换成 1em 有个连带项:`margin-right` 原来是 0.35em,
* 而 em 是相对**编号自身**字号的。字号从 14.88 → 24 后,
* 同一个 0.35em 会从 5.2px 变成 8.4px,间距明显偏大。
* 所以同步收到 **0.25em**(24px ⇒ 6.0px、20 ⇒ 5.0px、17 ⇒ 4.25px),
* 与原来 5.2px 的观感基本一致。
*
* ── font-weight / font-style 必须显式重置 ────────────────────
* span 会继承标题的 font-weight(700/600)和可能的斜体。
* 不重置的话"灰色但加粗"仍然很重,弱化就白做了。
*
* ── margin-right 用 0.35em 而不是固定 px ────────────────────
* 同样是为了跟标题字号联动;h2 的 24px ⇒ 8.4px,h3 的 20px ⇒ 7px,
* 在两级上都刚好是"一个空格多一点"的呼吸感。
* ── 🔴 为什么仍保留 `display: inline-block` ────────────────────
* 这一条最初是为了修「小字号撑高行盒」,字号改成 1em 之后
* **同字号本身已经不撑高了**(实测 inline + inherit 也是 46px)。
* 但仍然保留,两个理由:
* ① 防回归 —— 以后谁把字号改回小号,不会立刻复发 3px;
* ② 编号成为原子盒,永远不跨行断开,始终贴在标题第一行开头。
*
* ── 🔴 为什么必须 `display: inline-block`(这是本规则最不直观的一处)──
* 下面是当时那个 3px 问题的完整记录,留着是因为**修法不直观**:
* 小字号的行内元素会把行盒**撑高**,实测 h2 46 → **49px**、h3 37 → **40px**,
* 每级都多 3px。3px 不起眼,但它出现在**每一个**标题上:长文 10 个二级标题
* 就多出 30px,h2 的灰底跟着变高,整篇标题的节奏全变;更麻烦的是它**只在
@@ -284,12 +294,21 @@
* yang_toc_scan() 的结果里(它们是 [Archives] 渲染时才产生的),
* 所以天然不受影响。评论区 h3 同理(不在 .content 内)。 */
.k-main .details .article .content .yang-h-num {
/* 🔴 原子行内盒:不参与行盒的半行距计算,标题高度才不会被撑高(见上) */
/* 🔴 原子行内盒:不参与行盒的半行距计算,标题高度才不会被撑高(见上)
*
* 3.2.63:字号改成 1em(与标题同大)。用户反馈 0.62em 太小、"很不协调"。
* 实测同字号之后,inline / inherit 也不会撑高了(撑高本来就是小字号的
* 半行距造成的,字号一致时半行距也一致)。但 display 仍保留 inline-block:
* ① 防回归 —— 以后若有人把字号改回小号,不会立刻复发 3px 问题;
* ② 编号变成原子盒,永远不会跨行断开,始终贴着标题第一行开头。 */
display: inline-block;
line-height: 1;
margin-right: 0.35em;
/* 🔴 margin-right 是相对**编号自身**字号的(0.35em 在 14.88px 时是 5.2px)。
* 字号改成 1em 后同一个 0.35em 会变成 8.4px,间距明显偏大 ⇒ 同步收到 0.25em
* (24px 标题 ⇒ 6.0px,20px ⇒ 5.0px,17px ⇒ 4.25px,与原来的观感接近)。 */
margin-right: 0.25em;
color: #a8abb2;
font-size: 0.62em;
font-size: 1em;
font-weight: 400;
font-style: normal;
/* 数字等宽,1.1 和 3.10 宽度一致,多行标题才不会看着参差 */
+1 -1
View File
@@ -1,7 +1,7 @@
/*
Theme Name: Kratos_Yang
Text Domain: kratos_Yang
Version: 3.2.62
Version: 3.2.63
Requires PHP: 7.0
Description: 这是一个Kratos主题的分支版本,用来增加一些定制化功能。
Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好